vue瀑布流布局

vue使用瀑布流
npm install --save vue-waterfall2
main.js引入
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
html------------------------
<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>

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赋值
　　　　//简单粗暴的有了分页功能
　　}
}

css样式
.container-water-fall{
　　padding: 10px 3%;
　　width: 100vw;
　　box-sizing: border-box;
}
.cell-item{
　　background: #fff;
　　border-radius: 10px;
　　overflow: hidden;
　　box-sizing: border-box;
　　margin: 15% 0;
　　img{
　　　　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: #999;
}

.tech-list-ll .tab-bottom{
　　padding: 10px 0 !important;
　　height: 0 !important;
　　background: #fafafa !important;
}