小程序瀑布流布局

 

实现方案
左右两边是两列，两个数组，用boundingClientRect获取左右的高度，判断下一个应该添加到哪个数组，接口用的豆瓣公共的接口，用scroll-view实现下拉刷新上拉加载更多
wxml片段：

<block wx:if="{{!isNoData}}">
  <view class="pro-box">
    <view
    id="leftList"
    class="pro-list pro-list1">
      <view
      wx:for="{{leftList}}"
      wx:key="id"
      class="pro-item">
        <image class="img" mode="widthFix" src="{{item.pic}}"></image>
        <view class="title">{{item.title}}</view>
        <view class="ft">
          <view class="price">
            <text class="pre">￥</text>{{item.minPric}}
          </view>
          <view class="num">{{item.minNum}}{{item.unit}}起批</view>
        </view>
      </view>
    </view>
    <view
    id="rightList"
    class="pro-list pro-list2">
      <view
      wx:for="{{rightList}}"
      wx:key="id"
      class="pro-item">
        <image class="img" mode="widthFix" src="{{item.pic}}"></image>
        <view class="title">{{item.title}}</view>
        <view class="ft">
          <view class="price">
            <text>￥</text>{{item.minPric}}
          </view>
          <view class="num">{{item.minNum}}件起批</view>
        </view>
      </view>
    </view>
  </view>
  <mp-loading wx:if="{{isLoading}}" ext-class="loading" type="circle"></mp-loading>
  <view wx:if="{{isComplete}}" class="no-more">没有更多数据了</view>
</block>
<view wx:else class="no-data">暂无<text class="keyword">{{formData.keyWord}}</text>数据~</view>

 

js代码片段：

import { get } from '../../../../api/http.js'
import { showFail } from '../../../../utils/public.js'
const app = getApp()
let leftHeight = 0
let rightHeight = 0
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isLoading: false, // 列表是否正在加载更多
    isComplete: false, // 列表是否所有数据都加载完成
    isNoData: false, // 列表是否没有数据
    curPage: 1, // 列表当前页
    pageSize: 20, // 列表每页显示多少条
    leftList: [],
    rightList: []
  },

  // 获取列表
  getList () {
    const that = this
    const curPage = that.data.curPage
    const pageSize = that.data.pageSize
    const keyWord = ''
    let isShowLoading = true

    // 第一页的loading采用http封装里面的loading,其他采用本页中的isLoading
    if (curPage !== 1) {
      isShowLoading = false
      that.setData({
        isLoading: true
      })
    }

    get('/api/shop/queryListCompany', {
      data: {
        page: curPage,
        pageSize,
        keyword: keyWord
      },
      isShowLoading: isShowLoading
    }).then(async (res)=> {
      // 请求完成后隐藏loading
      that.setData({
        isLoading: false
      })
      if (res.code === '1') {
        const result = res.data
        const dataArry = result.data || []
        const totalPage = result.totalPage
        const total = result.totalCount
        const leftList = that.data.leftList
        const rightList = that.data.rightList

        // 当返回总条数为0时说明没有数据
        if (total === 0) {
          that.setData({
            isNoData: true
          })
          return
        }

        if (curPage > totalPage) {
          that.setData({
            isComplete: true
          })
          return
        }

        for (const item of dataArry.values()) {
          const itemObj = {
            id: item.id,
            pic: app.globalData.fileUrl + item.authPic,
            title: item.companyName,
            minPric: '35.00',
            minNum: 99,
            unit: '件'
          }
          if (leftHeight <= rightHeight) {
            leftList.push(itemObj)
          } else {
            rightList.push(itemObj)
          }
          await that.getBoxHeight(leftList, rightList)
        }
        // 请求完成后隐藏loading
        that.setData({
          curPage: curPage + 1
        })
      } else {
        showFail(res.msg)
      }
    }).catch((error) => {
      // 请求完成后隐藏loading
      that.setData({
        isLoading: false
      })
      showFail()
    })
  },

  //获取左右两边高度
  getBoxHeight (leftList, rightList) {
    const that = this
    return new Promise((resolve) => {
      that.setData({
        leftList,
        rightList
      }, () => {
        let query = wx.createSelectorQuery().in(that)
        query.select('#leftList').boundingClientRect()
        query.select('#rightList').boundingClientRect()
        query.exec((res) => {
          if (res[0]) {
            leftHeight = res[0].height
            rightHeight = res[1].height
          }
          resolve()
        })
      })
    })
  },

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

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    const that = this
    if (that.data.isLoading || that.data.isComplete || that.data.isNoData) {
      return
    }
    that.getList()
  },

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

  }
})

 

wxss文件：

.pro-box{width: 690rpx;margin: 0 auto;padding-top: 75rpx;overflow: hidden;}
.pro-list,.pro-item .img{width: 335rpx;overflow: hidden;}
.pro-list1{float: left;}
.pro-list2{float: right;}
.pro-item{margin-top: 30rpx;}
.pro-item .img{border-radius: 16rpx;}
.pro-item .title{color: #333;font-size: 30rpx;font-weight: bold;line-height: 42rpx;margin-left: 10rpx;margin-right: 10rpx;}
.pro-item .ft{display: flex;align-items: center;}
.pro-item .price{color: #E94F5A;font-size: 36rpx;font-weight: bold;margin-right: 30rpx;}
.pro-item .price .pre{font-size: 24rpx;position: relative;top: -2rpx;}
.pro-item .num{color: #999;font-size: 26rpx;}

.loading .weui-loadmore,.no-more{margin-bottom:0;margin-top: 20rpx;padding-bottom: 20rpx;}
.loading .weui-loadmore__tips,.no-more{font-size: 30rpx;color: #aaa;text-align: center;}
.no-data{text-align: center;color: #aaa;padding:50rpx;font-size: 30rpx;}
.no-data .keyword{color: #E94F5A;}

 

参考文献：

1、小程序瀑布流布局（完美方案）  

2、vue瀑布流布局（完美方案）

3、小程序瀑布流布局