效果图：
第一步：在自己的项目文件下安装vue-waterfall2
npm install --save vue-waterfall2
第二步：在main.js中引入
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
第三步：在需要做瀑布流的页面写入
<div class="container-water-fall">
<waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="dataList" @loadmore="loadmore" @scroll="scroll">
<template>
<div class="cell-item" v-for="(item,index) in dataList" :key="index" @click="handelRouter(item.id)">
<img v-if="item.photo" :src="item.photo" alt="加载错误" />
<div class="item-body">
<div class="item-descA">{{item.title}}</div>
<div class="item-descB">{{item.class}}</div>
</div>
</div>
</template>
</waterfall>
</div>
第四步：在script中
export default{
data(){
return{
dataList:[],
col:'2',
page：1
}
},
computed: {
itemWidth() {
return (334 * 0.5 * (document.documentElement.clientWidth / 375))
//rem布局 计算列宽度
//可以根据自己的rem设置修改这里的 334 值
},
gutterWidth() {
return (36 * 0.5 * (document.documentElement.clientWidth / 375))
//rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
//可以根据自己的rem设置修改这里的 36 值
},
},
methods: {
//布局
scroll(scrollData) {
// console.log(scrollData)
},
switchCol(col) {
this.col = col
// console.log(this.col)
},
loadmore(index) {
//这里是当滑动到底部时，再次请求接口，并且传page，返回的数据给dataList赋值
//简单粗暴的有了分页功能
}
}
第四步：样式（根据自己需要修改）
/* 流式布局 */
.container-water-fall {
/* // padding: 0 28px; */
padding: 10px 3%;
width: 100vw;
box-sizing: border-box;
/* background: #fafafa !important; */
}
.cell-item {
/* width: 100%; */
/* margin-bottom: 18px; */
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-sizing: border-box;
margin:10% 0;
}
.cell-item img {
/* border-radius: 12px 12px 0 0; */
width: 100%;
height: auto;
display: block;
}
.item-descA {
font-size: 17px;
color:rgba(46,44,42,1);
line-height: 17px;
font-weight: bold;
margin:11.5px 0 13px 9px;
}
.item-descB {
font-size:12px;
font-weight:500;
color:rgba(89,89,89,1);
line-height:17px;
margin:11.5px 0 13px 9px;
}
.item-footer {
margin-top: 22px;
position: relative;
display: flex;
align-items: center;
}
.name {
max-width: 150px;
margin-left: 10px;
font-size: 14px;
color: #999999;
}
.tech-list-ll .tab-bottom{
padding:10px 0 !important;
height: 0 !important;
background: #fafafa !important;
}
其他问题：
其中我用到属性
第一次写简书，有问题请多多指教
