vue使用瀑布流
npm install --save vue-waterfall2
main.js引入
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
html------------------------
<div >
<waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="https://www.cnblogs.com/ljkltt/p/dataList" @loadmore="loadmore" @scroll="scroll">
<template>
<div v-for="(item,index) in dataList" :key="index" @click="handelRouter(item.id)">
<img v-if="item.photo" :src="https://www.cnblogs.com/ljkltt/p/item.photo" alt="加載錯誤" />
<div >
<div >{{item.title}}</div>
<div >{{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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/232397.html
標籤：JavaScript
下一篇：vue富文本編輯器