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;
}