当前位置：首页 > VUE

vue实现瀑布流

2026-02-18 10:20:10VUE

Vue 实现瀑布流的方法

使用 CSS 多列布局

CSS 多列布局是一种简单的方式实现瀑布流效果。通过设置 column-count 和 column-gap 属性，可以快速实现多列布局。

<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: 3;
  column-gap: 15px;
}
.waterfall-item {
  break-inside: avoid;
  margin-bottom: 15px;
}
</style>

使用 Flexbox 布局

Flexbox 布局可以通过设置 flex-direction 为 column 并结合 flex-wrap 实现瀑布流效果。

<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 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 1000px;
}
.waterfall-item {
  width: 30%;
  margin: 10px;
}
</style>

使用第三方库（如 vue-waterfall）

vue-waterfall 是一个专门为 Vue 设计的瀑布流插件，支持动态加载和响应式布局。

安装：

npm install vue-waterfall

使用：

<template>
  <vue-waterfall :list="items" :cols="3" :gutter="15">
    <template v-slot:item="{ item }">
      <img :src="item.image" :alt="item.title" />
      <p>{{ item.title }}</p>
    </template>
  </vue-waterfall>
</template>

<script>
import VueWaterfall from 'vue-waterfall';

export default {
  components: { VueWaterfall },
  data() {
    return {
      items: [
        { image: 'path/to/image1.jpg', title: 'Item 1' },
        { image: 'path/to/image2.jpg', title: 'Item 2' },
      ]
    };
  }
};
</script>

使用 JavaScript 计算高度

通过 JavaScript 动态计算每个元素的位置，可以实现更灵活的瀑布流布局。

<template>
  <div class="waterfall-container" ref="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>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.layoutWaterfall();
    });
  },
  methods: {
    layoutWaterfall() {
      const container = this.$refs.container;
      const items = container.querySelectorAll('.waterfall-item');
      const columnCount = 3;
      const columnHeights = Array(columnCount).fill(0);
      const gap = 15;

      items.forEach(item => {
        const minHeight = Math.min(...columnHeights);
        const columnIndex = columnHeights.indexOf(minHeight);
        item.style.position = 'absolute';
        item.style.top = `${minHeight}px`;
        item.style.left = `${columnIndex * (item.offsetWidth + gap)}px`;
        columnHeights[columnIndex] += item.offsetHeight + gap;
      });

      container.style.height = `${Math.max(...columnHeights)}px`;
    }
  }
};
</script>

<style>
.waterfall-container {
  position: relative;
}
.waterfall-item {
  width: calc(33.33% - 10px);
  margin-bottom: 15px;
}
</style>

响应式调整

为了适应不同屏幕尺寸，可以使用 resize 事件监听窗口变化，动态调整布局。

vue实现瀑布流

methods: {
  handleResize() {
    this.layoutWaterfall();
  }
},
mounted() {
  window.addEventListener('resize', this.handleResize);
  this.$nextTick(this.layoutWaterfall);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

通过以上方法，可以根据项目需求选择合适的方案实现瀑布流效果。