vue-waterfall-easy的基本使用

最近项目中有个页面需要做成瀑布流，查找了相关的组件大多推荐vue-waterfall-easy，自己也就通过中文文档尝试了一下。
https://github.com/lfyfly/vue-waterfall-easy/blob/master/README-CN.md
安装就不多赘述了，关键是使用的时候要在当前页面中引入、注册

import vueWaterfallEasy from 'vue-waterfall-easy'
components: {
    vueWaterfallEasy
}

接着是使用

<vue-waterfall-easy :imgsArr="imgsArr"
                  	:gap="20"
                    :height="400"
                    :loadingDotCount='0'
                    :imgWidth='180'>
        <div slot-scope="props">
            <p v-html="props.value.info"></p>
        </div>
</vue-waterfall-easy>

vue-waterfall-easy默认是继承父元素的高度的，但是我的父元素没有设置高度，所以这里手动设置了一次，图片的大小用imgwidth来设置，因为我这里没有下拉刷新更多的需要，所以没有设置**@scrollReachBottom**，有需要的童鞋可以自己去查看相关用法。
imgsArr就是我们展示的数据，首先要在data里定义一个变量。

data() {
    return {
      imgsArr: []
    }
},

然后我们通过向后台发送请求得到展示的数据。

getData() {
      axios.get(
        "/api/material/xxxxxxxxx",
        {type: this.type},
        res => {
          this.imgsArr = []
          for (var i = 0; i < this.list.length; i++) {
            this.imgsArr.push({ src: 'images/materialList/'+this.list[i].img, link: '', info: `</div class="ant-card-body">xxxxxxxxxxx${this.list[i].name}xxxxxxxx</div>` })
            //src为加载的图片的地址、link为超链接的链接地址、info为自定义的图片展示信息，我这里因为是使用的ant-design的card样式，所以我复制了card展示时的代码到info中，大家可以根据自己的情况自行填写
          }
        },
        err => {
          this.$message.error("系统异常，请稍后重试");
        }
      );
},

这样我们的页面就加载成功了，如果需要滚动加载大家可以加上尝试一下，我就不再尝试了。