uniapp瀑布流使用计算高度的方法实现

要在uniapp中实现瀑布流布局，可以使用计算高度的方法。具体步骤如下：

1. 在组件的 `onLoad` 生命周期中获取屏幕宽度，计算每个 item 的宽度；
2. 在数据加载完成后，遍历数据并计算每个 item 的高度，可以使用 `uni.getImageInfo` 方法获取图片信息，进而计算图片的高度；
3. 将每个 item 的高度保存到数据中，并根据列数进行分组，每一组的高度即为该组中所有 item 的高度之和；
4. 在模板中使用 `v-for` 遍历每一组，设置 `flex-wrap: wrap` 和 `align-content: flex-start`，实现瀑布流布局；
5. 使用 `style` 绑定每个 item 的高度和宽度，以及 `margin` 或 `padding` 等样式，实现美观的布局效果。

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

<template>
  <view class="container">
    <view
      class="item"
      v-for="(group, index) in groupList"
      :key="index"
      :style="'height: ' + group.height + 'px; width: ' + itemWidth + 'px'"
    >
      <image
        class="img"
        :src="item.image"
        :style="'height: ' + item.height + 'px'"
        mode="aspectFill"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { image: 'url1' },
        { image: 'url2' },
        { image: 'url3' },
        // ...
      ],
      columnCount: 2, // 列数
      itemWidth: 0, // item 宽度
      groupList: [] // 每个分组的 item 列表
    };
  },
  onLoad() {
    const { windowWidth } = uni.getSystemInfoSync();
    this.itemWidth = windowWidth / this.columnCount;
  },
  mounted() {
    this.calculateHeight();
  },
  methods: {
    // 计算每个 item 的高度并分组
    calculateHeight() {
      const tempDataList = [...this.dataList];
      const groupList = Array.from({ length: this.columnCount }, () => ({
        height: 0,
        items: []
      }));
      while (tempDataList.length) {
        // 找到高度最小的分组
        const minGroupIndex = groupList.reduce((pre, cur, index) => {
          if (cur.height < groupList[pre].height) {
            return index;
          }
          return pre;
        }, 0);
        // 将 item 添加到分组中
        const item = tempDataList.shift();
        const { width } = uni.getImageInfoSync({
          src: item.image
        });
        const height = width * 300 / 200;
        item.height = height;
        groupList[minGroupIndex].height += height;
        groupList[minGroupIndex].items.push(item);
      }
      this.groupList = groupList;
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.item {
  margin: 10px;
  background-color: #eee;
  overflow: hidden;
}
.img {
  width: 100%;
}
</style>