当前位置：首页 > VUE

vue实现瀑布流

2026-03-30 11:21:47VUE

Vue 实现瀑布流的方法

使用 CSS 多列布局

CSS 的 column-count 和 column-gap 属性可以快速实现简单的瀑布流效果。这种方法适合静态内容，但动态加载时可能存在问题。

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

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

使用 Flexbox 布局

Flexbox 布局需要手动计算高度，适合动态加载的场景。

<template>
  <div class="waterfall">
    <div v-for="(column, index) in columns" :key="index" class="column">
      <div v-for="item in column" :key="item.id" class="item">
        <img :src="item.img" alt="">
      </div>
    </div>
  </div>
</template>

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

<style>
.waterfall {
  display: flex;
  justify-content: space-between;
}
.column {
  flex: 1;
  margin: 0 10px;
}
.item {
  margin-bottom: 20px;
}
</style>

使用第三方库

Vue 社区提供了专门的瀑布流组件，如 vue-waterfall 和 vue-masonry，可以简化实现过程。

vue实现瀑布流

安装 vue-waterfall：

npm install vue-waterfall --save

使用示例：

vue实现瀑布流

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

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

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

响应式处理

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

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

图片懒加载

结合 IntersectionObserver 或 vue-lazyload 实现图片懒加载，优化性能。

import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: 'loading.gif',
  attempt: 1
});

<img v-lazy="item.img" alt="">

以上方法可以根据项目需求选择，CSS 多列布局适合简单场景，Flexbox 适合动态内容，第三方库能快速实现复杂需求。

标签: 瀑布 vue

分享给朋友：

vue实现收起展开面板

实现收起展开面板的方法在Vue中实现收起展开面板功能可以通过多种方式完成，以下是几种常见的实现方法：使用v-show或v-if控制显示隐藏利用Vue的指令可以轻松实现面板的展开和收起： &l…

vue实现ai

Vue 实现 AI 功能 Vue.js 可以通过集成第三方 AI 服务或本地 AI 模型来实现 AI 功能。以下是几种常见的方法：集成第三方 AI API 使用 Vue 调用如 OpenAI、Go…

vue翻页实现

Vue翻页实现方法基础分页组件实现使用v-for和计算属性实现基础分页逻辑： <template> <div> <ul> <li…

利用vue 实现

以下是利用 Vue 实现常见功能的几种方法，分为不同场景和技术要点：数据绑定与响应式更新 Vue 的核心特性是数据绑定，通过 v-model 实现双向绑定： <template>…

vue实现123456

Vue 实现数字 123456 的显示在 Vue 中显示数字 123456 非常简单，可以通过以下方法实现：方法一：直接在模板中显示 <template> <div>…

vue实现datalist

使用 Vue 实现 HTML5 的 datalist 功能 HTML5 的 <datalist> 元素提供了一种自动完成输入框的功能，允许用户在输入时从预定义的选项列表中选择。以下是几种在…

vue实现瀑布流