vue瀑布流组件vue-waterfall-easy 2

jquer有个瀑布流插件Masonry，可以说是相当的好用，但是他是在操作dom的基础上，在vue里面就不怎么实用了，在vue中，我们可以使用vue-waterfall-easy组件，看名字就可以确定，这个使用起来相当的easy啊！

• npm安装

npm i vue-waterfall-easy --save-dev

• 调用

import vueWaterfallEasy from "vue-waterfall-easy";

• 注册

new Vue({
    el:'#app',
    components:{
        vueWaterfallEasy
    }
)

• 简单使用

//组件内调用
<vueWaterfallEasy :imgsArr="imgsarr"></vueWaterfallEasy>

• 参数

  1. weidth:数值；容器宽度
  2. height:数值或字符；容器高度
  3. gap:数值；pc端图片之间的间距
  4. mobileGap:数值；移动端图片之间的间距
  5. imgsArr:数组；渲染数据，每一项都是一个包含src和href属性的对象，可替换；
  6. imgWidth：数值；图片宽度
  7. maxCols：数值；最大列
  8. …………

• 事件

  1. scrollReachBottom : 滚动条事件
  2. preloaded : 图片预加载完成执行
  3. click：图片被点击
  4. imgError： 图片加载错误
  5. pullDownMove ：移动端触摸下拉
  6. pullDownEnd：移动端触摸下拉，手抬起

• 组件方法（滚动加载结束，手动调用以取消滚动加载）

   this.$refs.waterfall.waterfallOver()

最后，留一个详细文档地址    在线文档