vue-waterfall-plugin-test v1.0.10

Vue 瀑布流组件

vue waterfall plugin, support PC and mobile, support animate.css. vue 瀑布流插件，支持PC和移动端，支持animate的所有动画效果

在线演示地址

vue3版本

本地浏览

下载项目

yarn

or

npm i

npm run dev

安装

yarn add vue-waterfall-plugin

引入

import VueWaterfallPlugin from "vue-waterfall-plugin";
import "vue-waterfall-plugin/dist/style.css";

使用

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

 <VueWaterfallPlugin :list="list">
  <template #item="{ item, url, itemWidth }">
    <div class="card" @click="handleClickCard(item)">
      <img :src="url" />
      <p class="text">
        {{item}} 包含当前卡片所有信息
        {{url}} 当前卡片的图片资源
        {{itemWidth}} 当前卡片宽度
      </p>
    </div>
  </template>
</VueWaterfallPlugin>

全配置参数，配合图片尺寸信息使用

<VueWaterfallPlugin
  :list="list"
  :gutter="gutter"
  :hasAroundGutter="hasAroundGutter"
  :width="width"
  :breakpoints="breakpoints"
  :imgSelector="imgSelector"
  :backgroundColor="backgroundColor"
  :animationEffect="animationEffect"
  :animationDuration="animationDuration"
  :animationDelay="animationDelay"
>
  <template #item="{ item, url, itemWidth }">
  <div class="card">
    <img
      :src="url"
      alt=""
      :width="itemWidth"
      :height="(itemWidth * item.height) / item.width"
      :style="{ backgroundColor: item.backgroundColor }"
     />
    <p class="text">{{ item.name }}</p>
  </div>
  </template>
</VueWaterfallPlugin>

版本优化

• 图片加载完成后会自动更新排版，无需调用refresh函数
• 容器宽度变化后会自动更新排版，无需调用refresh函数
• 使用resizeObserver API 代替 window resize，性能开销更小
• 动画时间改为毫秒

参数

breakpoints: {
  1200: { //当屏幕宽度小于等于1200
    rowPerView: 4,
  },
  800: { //当屏幕宽度小于等于800
    rowPerView: 3,
  },
  500: { //当屏幕宽度小于等于500
    rowPerView: 2,
  }
}