vue-waterfall2 实现瀑布流 出现上拉加载的bug 以及时而出现一列的问题

vue-waterfall2 实现瀑布流，及总结的问题

最近项目要用到一个瀑布流可以无限上拉刷新的列表，偶然看到网上有一个开源的瀑布流插件叫做vue-waterfall2，便做了一个代码的搬运工。汗，前端技术小白伤不起。遇到了一个无法触发下拉刷新的bug，原因是因为在app.js里写入了公共样式height:100%;的样式冲突无法获取到页面导航条的高度所导致的，看到网上也没有解决的办法，各种扒资料也算终于解决了吧
友情提示：vue-waterfall2 @1.9.0版本，插件设定了高度，导致插件内容可以滚动，如果在插件上面加入banner或者其他内容，不会随着屏幕的滚动而滚动,
思路是你可以在App.vue里设置监听页面如果是瀑布流的页面html，body的高度不去设置为100%，其他的页面设置去设置高度100%
附上github的源码的 地址
这个是一些大佬们的见解：地址

1.安装 npm install vue-waterfall2@1.8.20 --save（我这边指定了waterfall2的版本号）
2.在需要的文件里引入
import waterfall from ‘vue-waterfall2’

滚动到底loadmore未触发

app.vue里或者总出口文件设置了 html，body的高度100% ， 解决办法就是在app.vue里去监听路由手动添加className设置样式

  watch: {
    $route (to, from) {
      //利用watch监听判断路由动态添加body和html的类名
      if (to.path !== '使用瀑布流的页面') {
        document.getElementsByTagName('body')[0].className = 'home'
        document.getElementsByTagName('html')[0].className = 'home'
      } else {
        document.getElementsByTagName('body')[0].className = ''
        document.getElementsByTagName('html')[0].className = ''
      }
    }
  }

.home{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-user-select:none ;
    -moz-user-select:none;
}

以上就是所有代码，页面样式的问题可以自己去修改，不怎么会写博客，如果遇到什么问题可以私信我，我很乐意与大家共同进步。

-------------------------------------- 分割线-----------------------------------

时而出现一列

如果在弱网的条件下dom节点这个时候还没有渲染完成就跳转页面了这个时候可能会出现只会排列在一列的情况，有一个办法就是你比对两列的数据如果某一列的数据比另外一列数据多三个以上重新调用一下你的数据请求方法让累加上来