vue瀑布流组件vue-waterfall-easy的使用

1、安装vue-waterfall-easy组件

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

2、在所需要使用的页面中引入该组件并编写相关业务逻辑代码

<template>
    <div>
    <vue-waterfall-easy v-show="!noData&&loadingShow" ref="waterfall" @scrollReachBottom="getData" :imgsArr="imgsArr" :loadingDotCount="3" :loadingDotStyle="{backgroundColor:'#29C694'}" :mobileGap="12" :style="{height:wrapheight+'px'}" :reachBottomDistance="15" @click="jump">
    <div class="img-info" slot-scope="props">
        <!-- <p class="readNum">{{list[props.index].readNum}}人浏览</p> -->
        <p class="some-info">{{list[props.index].title}}</p>
        <div class="some-class">
          <div class="item" v-show="list[props.index].topicTitle"><img src="../../static/images/title.png" alt="">{{list[props.index].topicTitle}}</div>
          <div class="item" v-show="list[props.index].sqTagList.length>0" v-for="sqTagListItem in list[props.index].sqTagList">{{sqTagListItem.title}}</div>
        </div>
        <div class="userInfo">
          <div class="userInfo_header">
            <img :src="list[props.index].portrait" alt="">
            <img src="../../static/images/vip.png" alt="" class="vipPic">
          </div>
          <div class="name">{{list[props.index].author}}</div>
        </div>
    </div>
    <div slot="waterfall-over" v-if="" class="allLoad">没有更多内容了～</div>
</vue-waterfall-easy>
    </div>
</template>
<script>
    import vueWaterfallEasy from 'vue-waterfall-easy';
   export default {
       name:'celebrity',
       components:{
           vueWaterfallEasy
       },
       methods:{
           getCircleArticleCollect(status){
              let _this=this;
              if(_this.allLoaded){
                return false;
              }
              $http.get(
                 apiUrl.celebrity,
                 {pageNum:this.currPage,pageSize:utils.pageSize,queryType:2},
                 {Authorization:this.token})
              .then(data => {
                let {code,data:resdata} = data;
                if(code == 200) {
                  _this.loadingShow=true;
                  if(resdata.list.length == 0) {
                      this.noData = true;
                      return;
                  }
                  resdata.list.forEach(element => {
                    let theHref='javascript:'+element.extTypes+';';
                    _this.imgsArr.push({src:element.img,href:theHref});
                  });
                  
                  this.list=this.list.concat(...resdata.list);
                  this.totalCount=resdata.totalCount;
                  if(resdata.totalCount == this.list.length) {
                      //由于数据请求完和数据加载完有时间误差，所以经常会出现问题
                      //1、请求判断没有更多数据的时候，阻止上拉加载更多的行为
                      //2、判断DOM如果都加载完的话，就显示默认的那个加载完的提示
                    this.allLoaded=true;     //先阻止上拉加载更多
                    var timer=setInterval(function(){
                      var DomLength=document.querySelector('.vue-waterfall-easy').querySelectorAll('.img-box').length;
                      if(DomLength==resdata.totalCount){       
                        _this.$refs.waterfall.waterfallOver();   //在定时器中判断如果数据加载完了，就显示加载完的提示
                        clearInterval(timer);
                      }
                    },100);
                  }
                } else {
                  Toast(utils.toastconfig(data.msg));
                }
               },err=>{
                  Toast(utils.toastconfig(err.msg)); 
              })
            }
           }
       }
   }
</script>