vue实现瀑布流插件
Vue 瀑布流插件实现方法
方法一：使用现有插件（如vue-waterfall-easy）
安装依赖：
npm install vue-waterfall-easy --save基础用法：
<template>
<vue-waterfall-easy
:imgsArr="imgsArr"
@scrollReachBottom="loadMore"
></vue-waterfall-easy>
</template>
<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
components: {
vueWaterfallEasy
},
data() {
return {
imgsArr: [] // 图片数据数组
}
},
methods: {
loadMore() {
// 加载更多数据
}
}
}
</script>方法二：自定义实现
核心CSS样式：
.waterfall-container {
column-count: 4;
column-gap: 10px;
}
.waterfall-item {
break-inside: avoid;
margin-bottom: 10px;
}Vue组件实现：
<template>
<div class="waterfall-container">
<div
v-for="(item, index) in items"
:key="index"
class="waterfall-item"
>
<img :src="item.src" :style="{width: '100%'}">
<div>{{ item.title }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true
}
}
}
</script>方法三：使用Masonry.js集成
安装Masonry：
npm install masonry-layout --save组件封装：
<template>
<div ref="container">
<div
v-for="(item, index) in items"
:key="index"
class="grid-item"
>
<!-- 内容 -->
</div>
</div>
</template>
<script>
import Masonry from 'masonry-layout'
export default {
mounted() {
new Masonry(this.$refs.container, {
itemSelector: '.grid-item',
columnWidth: 200,
gutter: 10
})
}
}
</script>响应式处理
监听窗口变化调整列数：
methods: {
handleResize() {
this.columnCount = window.innerWidth < 768 ? 2 : 4
}
},
mounted() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
}图片懒加载优化
使用Intersection Observer API：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target
img.src = img.dataset.src
observer.unobserve(img)
}
})
})
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img)
})以上方法可根据项目需求选择使用，现有插件方案适合快速开发，自定义实现提供更大灵活性，Masonry.js方案则在复杂布局场景下表现更优。
