Vue - vue-waterfall-plugin 瀑布流组件(Vue2+Vue3)
vue-waterfall-plugin 瀑布流组件有Vue2和Vue3版本,支持 PC 和移动端自适应,支持 animate.css 的所有动画效果,支持图片懒加载,可自定义卡片之间间距、卡片入场动画和延迟时间等。
一、安装vue-waterfall-plugin
Vue2:
npm install vue-waterfall-plugin
Vue3:
npm install vue-waterfall-plugin-next
二、如何使用
Vue2:
<template>
<Waterfall :list="list">
<template #item="{ item, url, index }">
<div class="card">
<LazyImg class="card_img" :url="url" />
</div>
</template>
</Waterfall>
</template>
<script >
import { LazyImg, Waterfall } from 'vue-waterfall-plugin'
import 'vue-waterfall-plugin/dist/style.css'
export default {
data() {
return {
list: [
{
src: "../src/assets/waterfall/1.jpg",
},
...省略...
{
src: "../src/assets/waterfall/5.jpg",
},
]
};
},
components: { LazyImg, Waterfall }, // 组件列表
};
</script>
<style scoped>
.card_img{
border-radius: 5px;
}
</style>
Vue3:
<template>
<Waterfall :list="list" :breakpoints="breakpoints">
<template #item="{ item, url, index }">
<div class="card">
<LazyImg class="card_img" :url="url" />
</div>
</template>
</Waterfall>
</template>
<script setup>
import {ref} from 'vue'
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
const list = ref([
{
src: "../src/assets/waterfall/1.jpg",
},
...省略...
{
src: "../src/assets/waterfall/5.jpg",
},
])
</script>
<style scoped>
.card_img{
border-radius: 5px;
}
</style>
其中Waterfall的作用域插槽返回了3个字段: item 原始数据, url 图片资源(默认src), index 卡片索引。
三、组件参数Props
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
list | Array | [] | 列表数据 |
rowKey | String | id | 数据唯一的字段,比如列表里面的id, 如果要删除卡片 |
imgSelector | String | src | 图片字段选择器,如果层级较深,使用 xxx.xxx.xxx 方式 |
width | Number | 200 | 卡片在 PC 上的宽度, 与breakpoints一样可以确定卡片的宽度以及每行个数, 但breakpoints优先级高于width |
breakpoints | Object | {1200:{rowPerView:3},800:{rowPerView:2},500:{rowPerView:1}} | 类似css的@media, 定义不同容器宽度下每行卡片个数,主要用于对移动端的适配 |
gutter | Number | 10 | 卡片之间的间隔 |
hasAroundGutter | Boolean | true | 容器四周是否有 gutter 边距 |
posDuration | Number | 300 | 卡片移动到正确位置的动画时间 |
animationPrefix | String | animate__animated | 详情见下文《动画样式》 |
animationEffect | String | fadeIn | 卡片入场动画,默认只有 fadeIn,引入 animation.css 后可使用其他动画 |
animationDuration | Number | 1000 | 卡片入场动画执行时间(单位毫秒),该动画时间只影响卡片重拍的时间,一般情况都不用修改,如果想要修改飞入动画的执行时间,见下文 |
animationDelay | Number | 300 | 卡片入场动画延迟(单位毫秒) |
backgroundColor | String | #ffffff | 背景颜色 |
loadProps | Object | loadProps | 懒加载图片组件的属性设置,详情见下文《懒加载属性》 |
lazyload | Boolean | true | 是否开启懒加载 |
crossOrigin | Boolean | true | 图片加载是否开启跨域 |
delay | Number | 300 | 布局刷新的防抖时间,默认 300ms 内没有再次触发才刷新布局。(图片加载完成;容器大小、list、width、gutter、hasAroundGutter变化时均会触发刷新) |
align(Vue3.x) | String | center | 卡片的对齐方式,可选值为:left,center,right |
WaterfallList 方法
方法名字 | 返回值类型 | 描述 |
---|---|---|
afterRender | 本次卡片坐标计算完成并且移动到了对应位置时触发 |
LazyImg 方法
方法名字 | 返回值类型 | 描述 |
---|---|---|
load | string | img标签的load函数 |
success | string | 图片加载成功 |
error | string | 图片加载失败 |
强制更新方法
<Waterfall ref="waterfall"></Waterfall>
const waterfall = ref(null)
waterfall.value.renderer()
WaterFall组件拥有一个renderer函数,可以直接调用,该方法可以主动重绘列表,使用其他懒加载图片组件的回调函数里可以调用这个renderer来重绘。
动画样式
这里的动画样式是指数据第一次插入时候的动画效果,要想使用动画必须引入animate.css或自定义一个动画className。
npm install animate.css --save
- 如果引入了animate.css,并且版本是4.x.x及以上,可以不作任何处理,直接在animationEffect中修改fadeIn动画类型
- 如果引入了animate.css,并且是老版本则需要将animationPrefix设置为animated
断点详细配置
breakpoints默认值,当此属性生效时,width失效
breakpoints: {
1200: {
// 当容器宽度 < 1200
rowPerView: 3,
},
800: {
// 当容器宽度 < 800
rowPerView: 2,
},
500: {
// 当容器宽度 < 500
rowPerView: 1,
},
}
懒加载属性(可设置加载图和错误图,并修改当前图片的宽高比)
import loading from 'assets/loading.png'
import error from 'assets/error.png'
loadProps: {
loading,
error,
ratioCalculator: (width, height) => {
// 我设置了最小宽高比
const minRatio = 3 / 4;
const maxRatio = 4 / 3;
// 获取当前图片的比例
const curRatio = width / height;
// 如果当前图片比列不在此范围内,我们取最小或者最大值
if (curRatio < minRatio) {
return minRatio;
} else if (curRatio > maxRatio) {
return maxRatio;
} else {
return curRatio;
}
}
}
- loading 是图片加载时候的等待图
- error 是图片加载失败后的占位图
- ratioCalculator 是一个设置懒加载图片展示比列的方法,当我们不自定义的时候,懒加载最终出来的图比列就是图片本身,但是有时候我们的图片尺寸可能长宽比较极限,这样出来样式不太美观,我们都可以用这个方法按照我们的想法进行设置。
自定义懒加载图片样式
.lazy__img[lazy=loading] {
padding: 5em 0;
width: 48px;
}
.lazy__img[lazy=loaded] {
width: 100%;
}
.lazy__img[lazy=error] {
padding: 5em 0;
width: 48px;
}
在vue中使用vue-waterfall-plugin 瀑布流组件,支持PC和移动端自适应,可以更多元化的对图片数据列表进行美化排版,搭配animate.css 动画库的动画效果,也是挺不错的视觉体验!
animate.css 动画库:animate.css
vue-waterfall-plugin(Vue2):vue-waterfall-plugin - github
vue3-waterfall-plugin(Vue3):vue3-waterfall-plugin - github