当前位置：首页 > VUE

vue实现瀑布流

2026-03-09 23:31:24VUE

Vue 实现瀑布流布局

瀑布流布局是一种常见的网页布局方式，适用于图片、商品展示等场景。以下是几种实现方法：

使用 CSS 多列布局

CSS 多列布局是一种简单的实现方式，适用于内容高度差异不大的情况。

<template>
  <div class="waterfall-container">
    <div v-for="(item, index) in items" :key="index" class="waterfall-item">
      <img :src="item.image" :alt="item.title">
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>

<style>
.waterfall-container {
  column-count: 4;
  column-gap: 15px;
}
.waterfall-item {
  break-inside: avoid;
  margin-bottom: 15px;
}
</style>

使用 JavaScript 计算位置

对于高度差异较大的内容，可以通过 JavaScript 动态计算每个元素的位置。

vue实现瀑布流

<template>
  <div class="waterfall" ref="waterfall">
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      class="item" 
      :style="{ top: item.top + 'px', left: item.left + 'px', height: item.height + 'px' }"
    >
      <img :src="item.image" :alt="item.title">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      columnWidth: 200,
      gap: 15
    }
  },
  mounted() {
    this.initItems();
    this.layoutItems();
    window.addEventListener('resize', this.layoutItems);
  },
  methods: {
    initItems() {
      // 模拟数据
      this.items = Array.from({ length: 20 }, (_, i) => ({
        image: `https://picsum.photos/200/${300 + Math.random() * 200}`,
        height: 300 + Math.random() * 200,
        top: 0,
        left: 0
      }));
    },
    layoutItems() {
      const containerWidth = this.$refs.waterfall.offsetWidth;
      const columnCount = Math.floor(containerWidth / (this.columnWidth + this.gap));
      const columnHeights = Array(columnCount).fill(0);

      this.items.forEach(item => {
        const minHeight = Math.min(...columnHeights);
        const columnIndex = columnHeights.indexOf(minHeight);

        item.left = columnIndex * (this.columnWidth + this.gap);
        item.top = minHeight;

        columnHeights[columnIndex] += item.height + this.gap;
      });
    }
  }
}
</script>

<style>
.waterfall {
  position: relative;
  width: 100%;
}
.item {
  position: absolute;
  width: 200px;
}
.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

使用第三方库

对于更复杂的需求，可以使用专门的瀑布流库如 vue-waterfall 或 masonry-layout。

安装 vue-waterfall:
```
npm install vue-waterfall --save
```

使用示例:


<template>
<waterfall :col="3" :data="items">
 <template>
   <div class="cell-item" v-for="(item, index) in items" :key="index">
     <img :src="item.image" />
     <div class="item-body">
       <div class="item-desc">{{item.title}}</div>
     </div>
   </div>
 </template>
</waterfall>
</template>

import Waterfall from 'vue-waterfall';

export default { components: { Waterfall }, data() { return { items: [] // 你的数据 } } }

```

响应式处理

为了使瀑布流在不同屏幕尺寸下都能良好显示，可以添加响应式处理：

methods: {
  handleResize() {
    const width = window.innerWidth;
    if (width < 768) {
      this.columnCount = 2;
    } else if (width < 1024) {
      this.columnCount = 3;
    } else {
      this.columnCount = 4;
    }
    this.layoutItems();
  }
},
mounted() {
  window.addEventListener('resize', this.handleResize);
  this.handleResize();
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

以上方法可以根据项目需求选择适合的实现方式。CSS 多列布局最简单但灵活性较差，JavaScript 计算位置方式最灵活但需要自己处理布局逻辑，第三方库则提供了开箱即用的解决方案但增加了依赖。