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

参考文档

效果图如下：

✨1.安装

npm install vue-waterfall-easy --save-dev

✨2.引入

	import vueWaterfallEasy from 'vue-waterfall-easy'
	
	export default {
	  name: 'app',
	  components: {
	    vueWaterfallEasy
	  }
	}

✨3.使用

	<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>

✨具体代码如下：

<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>

✨总结如下：

踩坑1：（父元素必须设定宽高，其他更多配置参数参考文档，此处就不一一赘述）

踩坑2：引入插件之后，默认显示的两个滚动条，需给父元素进行定位，以及设置*{margin:0;padding:0},具体样式请参考以上代码。

‍以上数据是通过mockjs来模拟的，通过npm install mockjs -D进行安装即可；