Vue2 瀑布流组件

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 }">
    <div class="card">
      <LazyImg :url="url" />
      <p class="text">这是内容</p>
    </div>
  </template>
</Waterfall>

data: {
  list: [
    {
      src: "xxxx.jpg",
      ...
    }
    ...
  ]
}

作用域插槽返回了3个字段： item 原始数据, url 图片资源, index 卡片索引

Props 参数

参数名	类型	默认值	描述
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: { //当屏幕宽度小于等于1200
    rowPerView: 4,
  },
  800: { //当屏幕宽度小于等于800
    rowPerView: 3,
  },
  500: { //当屏幕宽度小于等于500
    rowPerView: 2,
  }
}

loadProps

import loading from 'assets/loading.png'
import error from 'assets/error.png'
loadProps: {
  loading,
  error
}

懒加载图片样式覆盖，需要将覆盖样式放在全局才能生效

.lazy__img[lazy=loading] {
  padding: 5em 0;
  width: 48px;
}

.lazy__img[lazy=loaded] {
  width: 100%;
}

.lazy__img[lazy=error] {
  padding: 5em 0;
  width: 48px;
}