当前位置：首页 > VUE

vue简单实现瀑布流

2026-01-23 07:34:48VUE

vue实现瀑布流的方法

使用Vue实现瀑布流布局可以通过CSS或JavaScript库完成。以下是几种常见方法：

使用CSS columns属性

CSS columns属性可以快速实现瀑布流效果，适合简单场景：

<template>
  <div class="waterfall-container">
    <div v-for="(item, index) in items" :key="index" class="waterfall-item">
      <img :src="item.img" />
      <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>

使用flex布局配合计算高度

通过flex布局和计算高度实现更灵活的瀑布流：

vue简单实现瀑布流

export default {
  data() {
    return {
      items: [], // 数据源
      columns: [[], [], []] // 分列存储
    }
  },
  methods: {
    distributeItems() {
      this.columns = [[], [], []]
      this.items.forEach(item => {
        const shortestColumn = this.getShortestColumn()
        shortestColumn.push(item)
      })
    },
    getShortestColumn() {
      return this.columns.reduce((prev, curr) => 
        prev.length < curr.length ? prev : curr
      )
    }
  },
  mounted() {
    this.distributeItems()
  }
}

使用第三方库Masonry

Masonry是流行的瀑布流布局库，与Vue配合使用：

npm install masonry-layout

组件实现：

vue简单实现瀑布流

import Masonry from 'masonry-layout'

export default {
  mounted() {
    new Masonry(this.$refs.grid, {
      itemSelector: '.grid-item',
      columnWidth: 200,
      gutter: 10
    })
  }
}

响应式瀑布流实现

添加窗口大小监听实现响应式：

export default {
  data() {
    return {
      columnCount: 3
    }
  },
  methods: {
    calculateColumns() {
      this.columnCount = window.innerWidth < 600 ? 2 : 3
    }
  },
  mounted() {
    window.addEventListener('resize', this.calculateColumns)
    this.calculateColumns()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateColumns)
  }
}

图片懒加载优化

结合Intersection Observer实现图片懒加载：

export default {
  methods: {
    initObserver() {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target
            img.src = img.dataset.src
            observer.unobserve(img)
          }
        })
      })

      this.$nextTick(() => {
        document.querySelectorAll('.lazy-img').forEach(img => {
          observer.observe(img)
        })
      })
    }
  }
}

以上方法可根据项目需求选择，CSS columns适合简单场景，JavaScript实现更灵活，第三方库功能更强大。响应式设计和懒加载能显著提升用户体验。