vue 瀑布流插件，支持 PC 和移动端，支持 animate 的所有动画效果，支持图片懒加载
在线演示地址
vue3 版本
npm install vue-waterfall-plugin
import{LazyImg,Waterfall}from'vue-waterfall-plugin'import'vue-waterfall-plugin/dist/style.css'<Waterfall:list="list"><template#item="{ item, url, index }"><divclass="card"><LazyImg:url="url"/><pclass="text">这是内容</p></div></template></Waterfall>data:{ list:[{src:"xxxx.jpg", ...} ...]}作用域插槽返回了3个字段：item 原始数据,url 图片资源,index 卡片索引
| 参数名 | 类型 | 默认值 | 描述 |
|---|
list | Array | [] | 列表数据 |
rowKey | String | id | 数据唯一的字段，比如列表里面的id, 如果要删除卡片，该字段为必填 |
imgSelector | String | src | 图片字段选择器，如果层级较深，使用xxx.xxx.xxx 方式 |
width | Number | 200 | 卡片在 PC 上的宽度 |
breakpoints | Object | breakpoints | 自定义行显示个数，主要用于对移动端的适配 |
gutter | Number | 10 | 卡片之间的间隙 |
hasAroundGutter | Boolean | true | 容器四周是否有gutter 边距 |
animationPrefix | String | animate__animated | animate.css 的动画绑定className，默认的是4.x.x 版本，如果想使用老版本，只需要改成animated 即可 |
animationEffect | String | fadeIn | 卡片入场动画，默认只有fadeIn，引入animation.css 后可使用其他动画 |
animationDuration | Number | 1000 | 动画执行时间（单位毫秒） |
animationDelay | Number | 300 | 动画延迟（单位毫秒） |
backgroundColor | String | #ffffff | 背景颜色 |
loadProps | Object | loadProps | 加载的图片和失败的图片 |
lazyload | Boolean | true | 是否开启懒加载 |
delay | Number | 300 | 布局刷新的防抖时间，默认300ms 内没有再次触发才刷新布局。（图片加载完成；容器大小、list、width、gutter、hasAroundGutter变化时均会触发刷新） |
breakpoints
breakpoints:{1200:{//当屏幕宽度小于等于1200rowPerView:4,},800:{//当屏幕宽度小于等于800rowPerView:3,},500:{//当屏幕宽度小于等于500rowPerView:2,}}loadProps
importloadingfrom'assets/loading.png'importerrorfrom'assets/error.png'loadProps:{loading,error}懒加载图片样式覆盖，需要将覆盖样式放在全局才能生效
.lazy__img[lazy=loading] {padding:5em0;width:48px;}.lazy__img[lazy=loaded] {width:100%;}.lazy__img[lazy=error] {padding:5em0;width:48px;}