vue瀑布流实现
Vue 瀑布流实现方法
使用 CSS Grid 实现
CSS Grid 提供了一种简单的方式来实现瀑布流布局。通过设置 grid-auto-flow: dense 和 grid-template-columns 可以创建自适应的瀑布流效果。
<template>
<div class="waterfall-container">
<div v-for="(item, index) in items" :key="index" class="waterfall-item">
<img :src="item.image" :alt="item.title">
<p>{{ item.title }}</p>
</div>
</div>
</template>
<style>
.waterfall-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-flow: dense;
gap: 16px;
}
.waterfall-item {
break-inside: avoid;
}
</style>使用 Masonry 库
Masonry 是一个流行的瀑布流布局库，可以通过 Vue 包装器 vue-masonry 来使用。
安装依赖：
npm install vue-masonry实现代码：
import { VueMasonryPlugin } from 'vue-masonry'
Vue.use(VueMasonryPlugin)<template>
<div v-masonry transition-duration="0.3s" item-selector=".item">
<div v-masonry-tile class="item" v-for="(item, index) in items" :key="index">
<img :src="item.image">
<p>{{ item.title }}</p>
</div>
</div>
</template>使用纯 JavaScript 计算高度
对于需要更精确控制的情况，可以通过 JavaScript 计算元素位置来实现瀑布流。
methods: {
arrangeItems() {
const container = this.$refs.container
const items = this.$refs.items
const columnCount = 3
const columnHeights = Array(columnCount).fill(0)
items.forEach(item => {
const minHeight = Math.min(...columnHeights)
const columnIndex = columnHeights.indexOf(minHeight)
item.style.position = 'absolute'
item.style.left = `${columnIndex * (100 / columnCount)}%`
item.style.top = `${minHeight}px`
columnHeights[columnIndex] += item.offsetHeight + 10
})
container.style.height = `${Math.max(...columnHeights)}px`
}
}响应式处理
为了确保瀑布流在窗口大小变化时能正确重排，需要监听 resize 事件。
mounted() {
this.arrangeItems()
window.addEventListener('resize', this.arrangeItems)
},
beforeDestroy() {
window.removeEventListener('resize', this.arrangeItems)
}图片加载处理
当使用图片内容时，需要确保图片加载完成后再计算布局。
methods: {
loadImage(item) {
const img = new Image()
img.onload = () => {
item.loaded = true
this.arrangeItems()
}
img.src = item.image
}
}每种方法各有优缺点：CSS Grid 最简单但浏览器兼容性有限；Masonry 库功能强大但增加依赖；纯 JavaScript 实现最灵活但需要更多代码。根据项目需求选择合适的方法。
