vue使用 vue-waterfall-plugin-next 实现瀑布流

Vue3瀑布流插件支持PC和移动端，包含Animate的各种动画效果以及图片懒加载功能。

根据文档，可以先写出这样的一个例子

<template>
  <div id="app">
    <Waterfall ref="waterfall" :list="list" :breakpoints="breakpoints">
      <template #default="{ item, url, index }">
        <div class="card">
          <LazyImg class="card_img" :url="url" />
        </div>
      </template>
    </Waterfall>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
const list = ref([
  {
    src: "https://emample.com/1.png",
  },
  {
    src: "https://emample.com/1.png",
  },
  ...
])
</script>

<style scoped>
.card_img {
  border-radius: 5px;
}
</style>

跨域问题

文档提供的是本地图片，再用远程图片加载时候，不出意外地会出现跨域问题Access to image at 'https://emample.com/1.png' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

仔细研究文档，会看到 Props参数 里面有个跨域的参数

参数名	类型	默认值	描述
crossOrigin	Boolean	true	图片加载是否开启跨域

把默认值修改成 false 即可，即 <Waterfall :crossOrigin="false">

如无特殊说明 Vue3实现瀑布流 为博主 Lin 原创，转载请注明原文链接: https://blog.lin03.cn/archives/9/