uniapp vue 瀑布流如何实现

在uniapp中使用vue如何实现瀑布流布局？目前尝试了flex布局和column-count属性，但效果不理想，特别是在不同尺寸的图片加载时会出现错位。有没有成熟的组件或优化方案可以实现类似 Pinterest 的瀑布流效果？最好能兼顾性能和动态加载数据的需求。

2 回复

使用uniapp实现瀑布流，推荐两种方式：

  1. 使用flex布局 + column-count
.waterfall {
  column-count: 2;
  column-gap: 10px;
}
  1. 使用grid布局
.waterfall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

配合vue动态渲染数据即可。注意图片高度自适应，可用mode=“widthFix”。


在 UniApp 中实现瀑布流布局，可以通过以下步骤完成。这里使用 Flex 布局结合动态计算高度来实现，适用于多列瀑布流场景。

实现步骤

  1. 数据分列处理：将数据按列数拆分到不同数组中。
  2. 动态计算高度：每次添加新项时，选择高度最小的列插入。
  3. 监听图片加载：确保图片加载完成后更新列高度。

示例代码

<template>
  <view class="waterfall-container">
    <view v-for="(col, colIndex) in columnList" :key="colIndex" class="column">
      <view v-for="item in col" :key="item.id" class="item">
        <image :src="item.image" mode="widthFix" @load="onImageLoad(item.id, colIndex)" />
        <text>{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columnList: [[], [], []], // 假设3列
      columnHeights: [0, 0, 0], // 每列当前高度
      list: [ // 示例数据
        { id: 1, image: '/static/1.jpg', text: '项目1' },
        { id: 2, image: '/static/2.jpg', text: '项目2' },
        // ... 更多数据
      ]
    }
  },
  mounted() {
    this.distributeData();
  },
  methods: {
    // 分配数据到各列
    distributeData() {
      this.list.forEach(item => {
        const minHeightIndex = this.columnHeights.indexOf(Math.min(...this.columnHeights));
        this.columnList[minHeightIndex].push(item);
      });
    },
    // 图片加载完成后更新列高度
    onImageLoad(id, colIndex) {
      const query = uni.createSelectorQuery().in(this);
      query.select(`#item-${id}`).boundingClientRect(data => {
        if (data) {
          this.columnHeights[colIndex] += data.height;
        }
      }).exec();
    }
  }
}
</script>

<style scoped>
.waterfall-container {
  display: flex;
  padding: 10rpx;
}
.column {
  flex: 1;
  margin: 0 10rpx;
}
.item {
  margin-bottom: 20rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  overflow: hidden;
}
image {
  width: 100%;
}
</style>

注意事项

  • 列数调整：修改 columnList 和 columnHeights 数组长度可更改列数。
  • 性能优化：大量数据时建议分页加载，避免一次性渲染过多图片。
  • 兼容性：确保图片使用 mode="widthFix" 以正确计算高度。

此方法简单有效，适用于大多数瀑布流需求。如需更复杂功能（如动态列数），可结合插件或进一步优化计算逻辑。

回到顶部