当前位置：首页 > VUE

vue实现瀑布流插件

2026-01-22 12:03:09VUE

Vue实现瀑布流插件的方法

使用现有库（如vue-waterfall）

安装vue-waterfall库：

npm install vue-waterfall --save

在Vue组件中使用：

vue实现瀑布流插件

<template>
  <waterfall :col="col" :data="dataList">
    <template>
      <!-- 自定义内容 -->
      <div v-for="(item, index) in dataList" :key="index">
        <img :src="item.img" />
        <p>{{ item.title }}</p>
      </div>
    </template>
  </waterfall>
</template>

<script>
import waterfall from 'vue-waterfall'
export default {
  components: { waterfall },
  data() {
    return {
      col: 3, // 列数
      dataList: [] // 数据源
    }
  }
}
</script>

自定义实现

监听窗口变化动态计算列数：

<template>
  <div class="waterfall-container" ref="container">
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      class="waterfall-item"
      :style="{
        width: `${100/columns}%`,
        top: `${item.top}px`,
        left: `${item.left}px`,
        height: `${item.height}px`
      }">
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: 3,
      items: []
    }
  },
  mounted() {
    this.calculateLayout()
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    calculateLayout() {
      const containerWidth = this.$refs.container.clientWidth
      this.columns = Math.floor(containerWidth / 200) // 200为最小列宽

      const columnHeights = Array(this.columns).fill(0)
      this.items = this.data.map(item => {
        const minHeight = Math.min(...columnHeights)
        const columnIndex = columnHeights.indexOf(minHeight)

        const left = columnIndex * (containerWidth / this.columns)
        const top = minHeight

        columnHeights[columnIndex] += item.height

        return { ...item, left, top }
      })
    },
    handleResize() {
      this.calculateLayout()
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style>
.waterfall-container {
  position: relative;
}
.waterfall-item {
  position: absolute;
  box-sizing: border-box;
  padding: 10px;
}
</style>

使用CSS columns属性

纯CSS实现简单瀑布流：

vue实现瀑布流插件

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

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

使用Grid布局

CSS Grid实现：

<template>
  <div class="waterfall-grid">
    <div v-for="(item, index) in items" :key="index" 
         :style="{ gridRowEnd: `span ${Math.ceil(item.height/50)}` }">
      <!-- 内容 -->
    </div>
  </div>
</template>

<style>
.waterfall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 15px;
}
</style>

关键点总结：