微信小程序瀑布流布局demo

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

<!-- index.wxml -->
<view class="waterfall">
  <view wx:for="{{columns}}" wx:key="index" class="column">
    <view wx:for="{{column}}" wx:key="index" class="item">
      <image src="{{item.image}}" mode="aspectFit" class="item-image"></image>
      <text class="item-title">{{item.title}}</text>
    </view>
  </view>
</view>

/* index.wxss */
.waterfall {
  display: flex;
}

.column {
  flex: 1;
}

.item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}

.item-image {
  width: 100%;
  height: 200px;
}

.item-title {
  margin-top: 5px;
  font-size: 14px;
}

// index.js
const data = [
  { image: 'https://example.com/image1.jpg', title: 'Item 1' },
  { image: 'https://example.com/image2.jpg', title: 'Item 2' },
  { image: 'https://example.com/image3.jpg', title: 'Item 3' },
  // 更多数据项...
];

Page({
  data: {
    columns: [],
  },
  onLoad: function() {
    const columns = [[], [], []];

    data.forEach((item, index) => {
      const columnIndex = index % 3;
      columns[columnIndex].push(item);
    });

    this.setData({
      columns,
    });
  },
});

在这个示例中，我们使用了 Flex 布局来创建瀑布流效果。在 `index.wxml` 中，我们使用了 `wx:for` 循环来遍历每一列和每个项目，并使用 `image` 和 `text` 组件来显示图片和标题。在 `index.wxss` 中，我们设置了每个项目的样式，包括图片的宽度和高度、标题的样式等。

在 `index.js` 中，我们将数据分成了三列，并通过 `setData` 方法将数据传递给视图层。

您可以根据实际需求修改数据和样式。希望对您有所帮助！如果您有任何问题，请随时向我提问。