背景：使用了css，column原生写法和其他封装好的组件，要不就是排列的不整齐，要不就是无法实现滚动懒加载，最终找到最好的实现效果如下图

实现效果

操作流程

安装

使用npm安装vue-waterfall

 npm install vue-waterfall2@1.8.20 --save

项目内引用

在main.js文件中引用vue-waterfall

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

完整代码

vue html部分

<waterfall:col="col"---------col:划分几列，可以根据屏幕宽度来划分，其类型是数值型:gutterWidth="20":data="list"　　　　　　　　list:是请求到的每一页数据，由于分页，获取到的只有当前页数，因此列表循环的时候，使用List,即push上每一次page+1的数据@loadmore="loadmore"　　当滑到页面底部后，需要加载新的数据:lazyDistance="200"><template>写要展示内容</template></waterfall>

vue js部分

根据屏幕尺寸设置显示列数

        getcol() {if (window.innerWidth > 1580) {this.col = 5;} else if (1024 < window.innerWidth < 1580) {this.col = 4;} else if (768 < window.innerWidth < 1024) {this.col = 3;}},

loadmore：监听当前页面加载完成-------------该页面使用了watch监听page，因此page++后未调取this.getdata();可根据需要自行调取

loadmore() {if (this.page <= this.length && this.loadmore) {this.page++;}
},

获取数据方法按自己项目写即可

if (this.page === 1) {this.List = [];setTimeout(() => {this.List = res.data.data;------------当时第一页时，将数据赋值给List}, 50);} else {this.List = this.List.concat(res.data.data);----------当页码大于第一页时，List拼接到后面的数组}