瀑布流布局基础实现

其实就是把数据分成想要的列数，然后计算哪个列高度最小，然后把item设置坐标x,y到最小列下面

<view class="items-container">
    <view wx:for="{{itemsColumns}}" style="width:100px;height:{{item.height}}px;left: {{item.x}}px;top:{{item.y}}px;" class="item-container">
        {{index}}
    </view>
</view>

 .items-container {
  position: relative;
}

.item-container {
  border: 1rpx solid orangered;
  position: absolute;
}

.item-container:nth-child(2n + 1) {
  border: 1rpx solid burlywood;
}

// mook数据
const items = [
      { width: 100, height: 50 },
      { width: 100, height: 150 },
      { width: 100, height: 30 },
      { width: 100, height: 10 },
      { width: 100, height: 20 },
      { width: 100, height: 50 },
      { width: 100, height: 90 },
      { width: 100, height: 160 },
      { width: 100, height: 60 },
      { width: 100, height: 10 },
      { width: 100, height: 40 },
    ]
// 调用
this.init(this.data.items, 4)
// 计算最小高度，和position的 x,y
init(list, column) {
    const itemsColumns = this.data.itemsColumns
    const columnHeight = this.data.columnHeight
    list.forEach((item, index) => {
      if (index < column) {
        itemsColumns.push({
          width: item.width,
          height: item.height,
          x: index ? index * (item.width + 10) : 0,
          y: 0,
        })
        columnHeight[index] = item.height + 10
      } else {
        let minIndex = 0
        let minHeight = this.data.columnHeight[0]

        this.data.columnHeight.forEach((it, idx) => {
          if (it < minHeight) {
            minIndex = idx
            minHeight = it
          }
        })

        itemsColumns.push({
          width: item.width,
          height: item.height,
          x: minIndex ? minIndex * (item.width + 10) : 0,
          y: minHeight,
        })
        columnHeight[minIndex] += item.height + 10
      }
    })

    this.setData({
      itemsColumns,
      columnHeight,
    })
  },

效果