微信小程序实现瀑布流布局

微信小程序实现瀑布流布局，效果如下：

waterFlow.png

index.js

import {firstData, pushData} from "./waterFlowMock.js"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    firstData, //初始数据
    pushData, // 加载数据
    pageIndex: 1, // 当前页数
    pageTotal: 1, // 最大页数
    reachBottom: false,
    listData: []
  },

  // 下拉刷新
  refresh() {
    this.setData({
      pageIndex: 1,
      pageTotal: 1
    })
    this.getAppList(false);
  },

  // 获取列表
  async getAppList(status) {
    // 上拉加载pageIndex += 1
    let pageIndex = this.data.pageIndex;
    if (status) {
      pageIndex += 1;
    }
    // 当前页数大于最大页数不执行后续
    if (pageIndex > this.data.pageTotal) {
      this.setData({
        reachBottom: true
      })
      return
    }
    wx.showLoading({
      mask: true,
      title: '加载中'
    })
    // const res = {
    //   method: 'post',
    //   data: {
    //     pageIndex,
    //   },
    //   url: indexApi.getAppList()
    // };
    // const returnValue = await request(res);
    // 下拉刷新直接赋值，上拉加载合并数组(调用接口使用)
    // let newArray = status ? this.data.listData.concat(returnValue.records) : returnValue.records;
    // 模拟添加数据(调用接口可注掉)
    let newArray = this.data.firstData;
    if(status) {
      newArray = this.data.listData.concat(this.data.pushData);
    }
    this.setData({
      pageIndex, //更新页数
      listData: newArray,
      pageTotal: 2
      // pageTotal: returnValue.pages
    })
    // 模拟延迟2秒(调用接口可去掉settiemout)
    setTimeout(() => {
      // 取消loading等待
      wx.hideLoading();
      // 通知页面停止下拉刷新效果
      wx.stopPullDownRefresh();
    }, 2000);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getAppList(false);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: async function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: async function () {
    this.refresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getAppList(true);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.wxml

<view>
  <view class="container">
    <view class="picture">
      <block wx:for="{{ listData }}"
        wx:key="index">
        <view class="item" >
          <view>
            <image 
              lazy-load
              mode="widthFix"
              src="{{ item.funcPhoto }}" />
          </view>
          <view class="text-center">{{ item.remark }}</view>
        </view>
        <view class="null-wrap"></view>
      </block>
    </view>
    <!-- 空列表提示 -->
    <view 
      wx:if="{{ listData.length == 0 }}" 
      class="flex flex-column flex-items-center">
      <image class="data-img"
        lazy-load
        mode="widthFix"
        src="/images/no-result.png" />
        <view>还没有数据哦~</view>
    </view>
    <!-- 置底了 -->
    <view 
      wx:if="{{ reachBottom }}"
      class="flex flex-center">
      ~ 到底啦 ~
    </view>
  </view>
</view>

index.wxss

/* 全局内边距 */
.container {
  padding: 0 20rpx;
}
/* 瀑布流布局 */
.picture{
  column-gap: 5rpx;
  column-count: 2;
  margin: 20rpx 0;
}
.item {
  width: calc(100% - 30rpx);
  break-inside: avoid;
  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
  border-radius: 10rpx;
  margin: 0 15rpx;
}
.item image {
  width: 100%;
}
.null-wrap{
  height: 30rpx;
}
.data-img{
  width: 300rpx;
  height: 300rpx;
}

waterFlow.js

// 静态模拟数据
const firstData = [
  {
    remark: "图片1",
    id: "62",
    funcPhoto: "/images/electronic.png"
  },
  {
    remark: "图片2",
    id: "63",
    funcPhoto: "/images/logo.png"
  },
  {
    remark: "图片3",
    id: "64",
    funcPhoto: "/images/default_img.png"
  },
  {
    remark: "图片4",
    id: "65",
    funcPhoto: "/images/no-result.png"
  },
  {
    remark: "图片5",
    id: "66",
    funcPhoto: "/images/default_img.png"
  },
  {
    remark: "图片6",
    id: "62",
    funcPhoto: "/images/logo.png"
  },
  {
    remark: "图片7",
    id: "63",
    funcPhoto: "/images/logo.png"
  },
  {
    remark: "图片8",
    id: "64",
    funcPhoto: "/images/logo.png"
  },
  {
    remark: "图片9",
    id: "65",
    funcPhoto: "/images/no-result.png"
  },
  {
    remark: "图片10",
    id: "66",
    funcPhoto: "/images/end.png"
  },
  {
    remark: "图片11",
    id: "65",
    funcPhoto: "/images/location.png"
  }
]

// 加载数据
const pushData = [
  {
    remark: "图片11",
    id: "66",
    funcPhoto: "/images/logo.png"
  },
  {
    remark: "图片12",
    id: "65",
    funcPhoto: "/images/no-result.png"
  },
]

 
export {
  pushData,
  firstData
}