uniapp微信小程序使用瀑布流结合z-panging组件显示pexels的图片

最终效果如下：

瀑布流组件用的：
https://ext.dcloud.net.cn/plugin?id=7594

下拉刷新组件用的：https://z-paging.zxlee.cn

这两个搭配起来省了很多事

z-paging中组合custom-waterfalls-flow，可下拉刷新、到底自动加载下一页。

下拉刷新效果：

到底自动加载下一页效果：

因为是瀑布流，所以两边会自动补位，不用担心那边缺了。

可以一直无限加载。

我这边的html代码结构如下：

<z-paging :fixed="false" :show-empty-view-reload="true" ref="paging" v-model="img_urls"

@query="load_pexels_images" :default-page-size="page_size"

:loading-more-enabled="loading_more_enabled"

:to-bottom-loading-more-enabled="to_bottom_loading_more_enabled"

:loading-more-title-custom-style="{'background-color': '#F8F8F8'}">

  <view class="pd-10">

    <custom-waterfalls-flow :value="img_urls" @imageClick="imageClick" @loaded="loaded">

      <view class="pd-5" v-for="(item,index) in img_urls" :key="index" slot="slot{{index}}">

        <view class="title">

        	<u-parse :content="item.title" :selectable="true"></u-parse>

        </view>

      </view>

    </custom-waterfalls-flow>

  </view>

</z-paging>

z-paging组件可配置的字段挺多的，完全可以满足下拉刷新的需求了，大家可以尝试下。

我这里的图片都是请求pexels.com的接口拿到的，具体API文档可以参考：
https://www.pexels.com/zh-cn/api/documentation/#photos-search

需要申请一个授权就行，但是有些限制，API的速率限制为每小时200个请求和每月 20000个请求。：