vue简单实现瀑布流
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布局和计算高度实现更灵活的瀑布流：
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组件实现：
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实现更灵活，第三方库功能更强大。响应式设计和懒加载能显著提升用户体验。
