Vue - vue-waterfall-plugin 瀑布流组件（Vue2 Vue3）

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

WaterfallList 方法

LazyImg 方法

强制更新方法

<Waterfall ref="waterfall"></Waterfall>
 
const waterfall = ref(null)
waterfall.value.renderer()复制

WaterFall组件拥有一个renderer函数，可以直接调用，该方法可以主动重绘列表，使用其他懒加载图片组件的回调函数里可以调用这个renderer来重绘。

动画样式

这里的动画样式是指数据第一次插入时候的动画效果，要想使用动画必须引入animate.css或自定义一个动画className。

npm install animate.css --save复制

1. 如果引入了animate.css，并且版本是4.x.x及以上，可以不作任何处理，直接在animationEffect中修改fadeIn动画类型
2. 如果引入了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;
    }
  }
}复制

1. loading 是图片加载时候的等待图
2. error 是图片加载失败后的占位图
3. 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