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

实现微信小程序瀑布流布局的代码如下：

<!-- .wxml -->
<scroll-view scroll-y="true" bindscrolltolower="loadMoreData">
  <view class="waterfall">
    <view class="waterfall-cell" wx:for="{{items}}" wx:key="{{item.id}}">
      <image class="waterfall-img" src="{{item.imgUrl}}" mode="aspectFit"></image>
      <view class="waterfall-title">{{item.title}}</view>
    </view>
  </view>
</scroll-view>

/* .wxss */
.waterfall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10rpx;
}

.waterfall-cell {
  width: 49%;
  margin-bottom: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,.2);
}

.waterfall-img {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 10rpx 10rpx 0 0;
}

.waterfall-title {
  padding: 10rpx;
  font-size: 28rpx;
  color: #333;
}

/* .js */
Page({
  data: {
    items: [
      { id: 1, title: 'Item 1', imgUrl: 'item1.jpg' },
      { id: 2, title: 'Item 2', imgUrl: 'item2.jpg' },
      { id: 3, title: 'Item 3', imgUrl: 'item3.jpg' },
      ...
    ]
  },
  loadMoreData() {
    // TODO: 加载更多数据
  }
})

以上代码中，我们使用了 `scroll-view` 组件实现了垂直滚动，并且绑定了 `bindscrolltolower` 事件，当用户滑动到底部时会触发该事件。在 `scroll-view` 内部，使用了一个 `view` 容器包裹所有的瀑布流单元格。每个瀑布流单元格使用一个 `view` 组件实现，包含了一张图片和一个标题。在 CSS 样式中，我们使用了 Flex 布局实现了瀑布流布局，并设置了每个单元格的宽度、高度、margin等属性，并使用圆角和阴影使其更加美观。在 JS 代码中，我们使用了一个数组 `items` 存储了所有的数据，并且定义了一个 `loadMoreData` 函数，用于加载更多数据。