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 #^3.3.1版本

Vue3：

npm install vue-waterfall-plugin-next #^2.6.4版本

二、如何使用

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 #default="{ 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 卡片索引。对于Vue3的2.6.0版本之前的作用域插槽需用