vue2 瀑布流 vue-waterfall-easy

npm install vue-waterfall-easy

import vueWaterfallEasy from "vue-waterfall-easy";

 recordList 是个数组 里面必须有src键 指对

 <vueWaterfallEasy
        ref="waterfall"
        class="vueWaterfallEasy-item"
        :imgsArr="recordList"
        @scrollReachBottom="getData"
        :imgWidth="itemWidth"
        :maxCols="colJs"
        @click="clickFn"
      >
</vueWaterfallEasy>

滚动加载 我的逻辑

    getData() {
      if (this.guanScroll) {
        this.paramsSize.page++;
        if (this.activeBtn === "我的创作" || this.activeBtn === "编辑") {
          this.getRecordList();
        } else if (this.activeBtn === "收藏") {
          this.getCollList();
        } else {
          this.getFocusOn();
        }
      }
    },

点击图片 

    async clickFn(event, { index, value }) {}

参考：vue-waterfall-easy瀑布流布局 - 掘金 (juejin.cn)

git地址：GitHub - lfyfly/vue-waterfall-easy: vue瀑布流组件(vue-waterfall-easy 2.x)