Vue3 瀑布流实现

环境/组件

1. vue3/cli
2. element-plus
3. axios
4. vue-waterfall-plugin-next

安装 vue-waterfall-plugin-next

vue create my-waterfall #创建vue3/cli项目
cd my-waterfall #进入项目目录
yarn add element-plus #安装element-plus
yarn add vue-waterfall-plugin-next #安装瀑布流组件

使用组件

<template>
  <Waterfall :list="list" :breakpoints="{1200:{rowPerView:4,}
  ,800:{rowPerView:3,},500: {rowPerView: 2,}}"
             :loadProps="{loading,error}">
    <template #item="{ item }">
      <el-card :body-style="{ padding: '0px' }">
        <LazyImg :url="item.hoverURL" />
        <div style="padding: 14px">
          <span>{{item.fromPageTitleEnc}}</span>
        </div>
      </el-card>
    </template>
  </Waterfall>
</template>

<script>
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/style.css'
import loading from '@/assets/loading.png'
import error from '@/assets/error.png'

export default {
  name: "MyWaterfall",
  props:['list'],
  components: {
    Waterfall,
    LazyImg
  },
  data() {
    return {
      loading,
      error
    }
  }
}
</script>