vue怎么实现瀑布流

Vue 实现瀑布流的方法

使用 CSS 的 column 属性

通过 CSS 的 column-count 和 column-gap 属性可以快速实现简单的瀑布流布局。这种方法适用于内容高度相近的场景。

<template>
  <div class="waterfall-container">
    <div v-for="item in items" :key="item.id" class="waterfall-item">
      <img :src="item.img" alt="">
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

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

使用 CSS 的 flex 布局

通过 flex 布局结合 flex-direction: column 和 flex-wrap: wrap 可以实现更灵活的瀑布流。

<template>
  <div class="waterfall-flex">
    <div v-for="item in items" :key="item.id" class="flex-item">
      <img :src="item.img" alt="">
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<style>
.waterfall-flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 1000px;
}
.flex-item {
  width: 33%;
  margin: 10px;
}
</style>

使用第三方库 vue-waterfall

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

安装：

npm install vue-waterfall --save

使用：

<template>
  <waterfall :col="3" :data="items">
    <template>
      <div class="cell-item" v-for="item in items" :key="item.id">
        <img :src="item.img" alt="">
        <p>{{ item.text }}</p>
      </div>
    </template>
  </waterfall>
</template>

<script>
import Waterfall from 'vue-waterfall'

export default {
  components: { Waterfall },
  data() {
    return {
      items: [...]
    }
  }
}
</script>

使用 JavaScript 计算位置

通过 JavaScript 动态计算每个元素的位置，可以实现高度自适应的瀑布流。

<template>
  <div class="waterfall-js" ref="container">
    <div 
      v-for="item in items" 
      :key="item.id" 
      class="js-item"
      :style="{ top: item.top + 'px', left: item.left + 'px' }"
    >
      <img :src="item.img" alt="">
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      colWidth: 300,
      gap: 15
    }
  },
  mounted() {
    this.calculatePositions()
    window.addEventListener('resize', this.calculatePositions)
  },
  methods: {
    calculatePositions() {
      const containerWidth = this.$refs.container.clientWidth
      const colCount = Math.floor(containerWidth / (this.colWidth + this.gap))
      const colHeights = new Array(colCount).fill(0)

      this.items.forEach(item => {
        const minHeight = Math.min(...colHeights)
        const colIndex = colHeights.indexOf(minHeight)
        item.left = colIndex * (this.colWidth + this.gap)
        item.top = minHeight
        colHeights[colIndex] += item.height + this.gap
      })
    }
  }
}
</script>

响应式处理

为适应不同屏幕尺寸，可以通过监听窗口变化动态调整列数。

export default {
  data() {
    return {
      colCount: 3
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  methods: {
    handleResize() {
      if (window.innerWidth < 768) {
        this.colCount = 1
      } else if (window.innerWidth < 1024) {
        this.colCount = 2
      } else {
        this.colCount = 3
      }
    }
  }
}

以上方法可根据项目需求选择，CSS 方法简单但灵活性较低，JavaScript 方法复杂但可控性强，第三方库则提供了开箱即用的解决方案。