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

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;
}

请根据具体需求进行更改!!!

凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数