前端vue实现瀑布流

使用纯CSS实现瀑布流

在Vue中可以通过CSS的column-count和column-gap属性快速实现瀑布流布局。这种方法适合内容高度不一致但宽度固定的场景。

<template>
  <div class="waterfall-container">
    <div v-for="(item, index) in items" :key="index" class="waterfall-item">
      <!-- 你的内容 -->
    </div>
  </div>
</template>

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

使用Masonry.js库实现

对于更复杂的瀑布流需求，可以使用Masonry.js库。先安装依赖：

npm install masonry-layout imagesloaded

在Vue组件中实现：

<template>
  <div ref="grid" class="grid">
    <div v-for="(item, index) in items" :key="index" class="grid-item">
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
import Masonry from 'masonry-layout'
import imagesLoaded from 'imagesloaded'

export default {
  mounted() {
    this.initMasonry()
  },
  methods: {
    initMasonry() {
      const grid = this.$refs.grid
      imagesLoaded(grid, () => {
        new Masonry(grid, {
          itemSelector: '.grid-item',
          columnWidth: 200,
          gutter: 10
        })
      })
    }
  }
}
</script>

使用VueWaterfall插件

vue-waterfall是一个专为Vue设计的瀑布流组件：

npm install vue-waterfall

组件使用示例：

<template>
  <vue-waterfall 
    :list="items" 
    :gutter="10"
    :width="240"
    :breakpoints="{
      1200: { rowPerView: 4 },
      800: { rowPerView: 3 },
      500: { rowPerView: 2 }
    }"
  >
    <template v-slot:item="{item}">
      <!-- 自定义内容 -->
    </template>
  </vue-waterfall>
</template>

<script>
import VueWaterfall from 'vue-waterfall'

export default {
  components: { VueWaterfall }
}
</script>

响应式瀑布流实现

结合Vue的响应式特性和ResizeObserver API，可以创建自适应容器宽度的瀑布流：

<template>
  <div ref="container" class="waterfall">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      :style="{
        width: `${columnWidth}px`,
        position: 'absolute',
        top: `${positions[index].top}px`,
        left: `${positions[index].left}px`
      }"
    >
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columnWidth: 200,
      columns: 0,
      positions: []
    }
  },
  mounted() {
    this.calculateLayout()
    new ResizeObserver(this.calculateLayout).observe(this.$refs.container)
  },
  methods: {
    calculateLayout() {
      const containerWidth = this.$refs.container.clientWidth
      this.columns = Math.floor(containerWidth / this.columnWidth)

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

        const position = {
          left: columnIndex * this.columnWidth,
          top: minHeight
        }

        columnHeights[columnIndex] += item.height + 10 // 加上间距
        return position
      })

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

虚拟滚动优化

对于大数据量的瀑布流，可以结合虚拟滚动技术优化性能：

<template>
  <div class="viewport" ref="viewport" @scroll="handleScroll">
    <div class="scroll-container" :style="{ height: `${totalHeight}px` }">
      <div 
        v-for="item in visibleItems" 
        :key="item.id"
        :style="{
          position: 'absolute',
          top: `${item.top}px`,
          left: `${item.left}px`,
          width: `${columnWidth}px`
        }"
      >
        <!-- 内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visibleItems: [],
      viewportHeight: 0,
      scrollTop: 0
    }
  },
  computed: {
    totalHeight() {
      // 计算总高度逻辑
    }
  },
  mounted() {
    this.viewportHeight = this.$refs.viewport.clientHeight
    this.updateVisibleItems()
  },
  methods: {
    handleScroll() {
      this.scrollTop = this.$refs.viewport.scrollTop
      this.updateVisibleItems()
    },
    updateVisibleItems() {
      // 根据scrollTop计算可见项
    }
  }
}
</script>

每种方法各有优缺点，CSS方法最简单但灵活性有限，Masonry.js功能强大但需要额外依赖，VueWaterfall专为Vue优化但可定制性较低，响应式实现最灵活但需要自行处理布局逻辑。根据项目需求选择最适合的方案。