vue中使用（瀑布流）vue-waterfall-easy插件

<template>
  <div class="waterfall">
    <vue-waterfall-easy
      :imgsArr="imgsArr"
      srcKey="img"
      @scrollReachBottom="getData"
      @click="clickFn"
      :maxCols="4"
    >
      <div class="img-info" slot-scope="props">
        <p class="some-info">{{ props.value.num }}张图片</p>
        <p class="some-info">{{ props.value.title }}</p>
      </div>
    </vue-waterfall-easy>
  </div>
</template>
<script>
import Mock from "mockjs";
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  components: {
    vueWaterfallEasy,
  },
  data() {
    return {
      imgsArr: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    clickFn(event, { index, value }) {
      // 阻止a标签跳转
      event.preventDefault();
      // 只有当点击到图片时才进行操作
      if (event.target.tagName.toLowerCase() == "img") {
        console.log("img clicked", index, value);
      }
    },
    getData() {
      //真实项目中根据真实的请求数据来进行追加（此处只是模拟）
      this.imgsArr.push(...this.imgsArr);
    },
    getList() {
      this.imgsArr = Mock.mock({
        "list|20": [
          {
            "id |+1": 1,
            img: "@image",
            "num|+1": 5,
            "title|": "@cname",
          },
        ],
      }).list;
      console.log(this.imgsArr);
    },
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
  width: 100%;
  .waterfall {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    .img-info {
      display: flex;
      justify-content: space-around;
      height: 45px;
      line-height: 45px;
    }
  }
}
</style>