首页 前端知识 Vue - vue-waterfall-plugin 瀑布流组件(Vue2 Vue3)

Vue - vue-waterfall-plugin 瀑布流组件(Vue2 Vue3)

2024-09-01 00:09:52 前端知识 前端哥 121 344 我要收藏

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

参数名类型默认值描述
listArray[]列表数据
rowKeyStringid数据唯一的字段,比如列表里面的id, 如果要删除卡片
imgSelectorStringsrc图片字段选择器,如果层级较深,使用 xxx.xxx.xxx 方式
widthNumber200卡片在 PC 上的宽度, 与breakpoints一样可以确定卡片的宽度以及每行个数, 但breakpoints优先级高于width
breakpointsObject{1200:{rowPerView:3},800:{rowPerView:2},500:{rowPerView:1}}类似css的@media, 定义不同容器宽度下每行卡片个数,主要用于对移动端的适配
gutterNumber10卡片之间的间隔
hasAroundGutterBooleantrue容器四周是否有 gutter 边距
posDurationNumber300卡片移动到正确位置的动画时间
animationPrefixStringanimate__animated详情见下文《动画样式》
animationEffectStringfadeIn卡片入场动画,默认只有 fadeIn,引入 animation.css 后可使用其他动画
animationDurationNumber1000卡片入场动画执行时间(单位毫秒),该动画时间只影响卡片重拍的时间,一般情况都不用修改,如果想要修改飞入动画的执行时间,见下文
animationDelayNumber300卡片入场动画延迟(单位毫秒)
backgroundColorString#ffffff背景颜色
loadPropsObjectloadProps懒加载图片组件的属性设置,详情见下文《懒加载属性》
lazyloadBooleantrue是否开启懒加载
crossOriginBooleantrue图片加载是否开启跨域
delayNumber300布局刷新的防抖时间,默认 300ms 内没有再次触发才刷新布局。(图片加载完成;容器大小、list、width、gutter、hasAroundGutter变化时均会触发刷新)
align(Vue3.x)Stringcenter卡片的对齐方式,可选值为:left,center,right

WaterfallList 方法

方法名字返回值类型描述
afterRender本次卡片坐标计算完成并且移动到了对应位置时触发

LazyImg 方法

方法名字返回值类型描述
loadstringimg标签的load函数
successstring图片加载成功
errorstring图片加载失败

强制更新方法

<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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17391.html
标签
评论
发布的文章

Spring MVC-JSON

2024-06-02 09:06:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!