微信小程序瀑布流布局，js代码

以下是微信小程序瀑布流布局的示例代码：

1. 在 wxml 文件中添加以下代码：

<view class="waterfall">
  <block wx:for="{{list}}" wx:key="{{item.id}}">
    <view class="waterfall-item" style="height: {{item.height}}rpx;">
      <image src="{{item.img}}" mode="widthFix"></image>
    </view>
  </block>
</view>

2. 在 wxss 文件中添加以下代码：

.waterfall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10rpx;
}

.waterfall-item {
  width: 47%;
  background-color: #eee;
  border-radius: 5rpx;
  margin-bottom: 10rpx;
  box-sizing: border-box;
  overflow: hidden;
}

3. 在 js 文件中添加以下代码：

Page({
  data: {
    list: [
      { id: 1, img: "https://img.com/1.jpg", height: 200 },
      { id: 2, img: "https://img.com/2.jpg", height: 300 },
      { id: 3, img: "https://img.com/3.jpg", height: 250 },
      { id: 4, img: "https://img.com/4.jpg", height: 280 },
      { id: 5, img: "https://img.com/5.jpg", height: 220 },
      { id: 6, img: "https://img.com/6.jpg", height: 320 },
    ]
  },
})

其中，`list` 数组中包含了每一个瀑布流项的数据，包括 id、img 和 height。在 wxml 文件中，使用 `wx:for` 循环遍历 list 数组，并使用 `style` 属性设置每个瀑布流项的高度。在 wxss 文件中，使用 flex 布局实现瀑布流效果。