微信小程序瀑布流布局通过js代码实现

微信小程序瀑布流布局可以通过 JS 代码实现。具体步骤如下：

1. 定义一个数组，存储所有数据。

2. 在 `onLoad` 函数中，调用 `setData` 函数，设置数组中的数据。

3. 在 `onReachBottom` 函数中，动态地加载更多数据，并使用 `concat` 函数将新数据添加到原数组中。

4. 在 `onImageLoad` 函数中，动态地计算每个单元格的高度，并使用 `setData` 函数更新数组中每个单元格的高度。

下面是一个简单的示例代码：

/* .js */
Page({
  data: {
    items: [
      { id: 1, title: 'Item 1', imgUrl: 'item1.jpg', height: 0 },
      { id: 2, title: 'Item 2', imgUrl: 'item2.jpg', height: 0 },
      { id: 3, title: 'Item 3', imgUrl: 'item3.jpg', height: 0 },
      ...
    ]
  },
  onLoad() {
    this.setData({
      items: this.data.items
    })
  },
  onReachBottom() {
    // TODO: 加载更多数据
    const newItems = [{ id: 4, title: 'Item 4', imgUrl: 'item4.jpg', height: 0 }, ...]
    this.setData({
      items: this.data.items.concat(newItems)
    })
  },
  onImageLoad(e) {
    const index = e.currentTarget.dataset.index
    const height = e.detail.height
    const item = `items[${index}].height`
    this.setData({
      [item]: height
    })
  }
})

以上代码中，我们首先在 `data` 中定义了一个数组 `items`，存储了所有的数据，并且包含了一个 `height` 属性，用于动态地计算每个单元格的高度。在 `onLoad` 函数中，我们调用了 `setData` 函数，设置数组中的数据。在 `onReachBottom` 函数中，我们动态地加载更多数据，并使用 `concat` 函数将新数据添加到原数组中。在 `onImageLoad` 函数中，我们动态地计算每个单元格的高度，使用 `setData` 函数更新数组中每个单元格的高度。