瀑布流插件
npm i vue-waterfall2@latest --save
main.js
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
Name | Default | Type | Desc |
---|---|---|---|
height | 100% | String | 容器高度 |
col | 2 | Number | 列数 |
width | - | Number | 宽度 |
gutterWidth | 10 | Number | 间隔的宽度 |
data | [] | Array | 数据 |
isTransition | true | Boolean | 加载图片是否使用过渡动画 |
lazyDistance | 300 | Number | 触发图片懒加载的距离 |
loadDistance | 300 | Number | 触发上拉加载更多的距离 |
提供懒加载
<waterfall :col='col' :data="data" >
<template>
<img v-if="item.img" :lazy-src="item.img" alt="加载错误" />
</template>
</waterfall>
waterfall.vue
<template>
<div class="container-water-fall">
<div><button @click="loadmore">loadmore</button> <button @click="mix">mix</button> <button @click="switchCol('5')">5列</button> <button @click="switchCol('8')">8列</button> <button @click="switchCol('10')">10列</button> </div>
<waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="data" @loadmore="loadmore" @scroll="scroll" >
<template >
<div class="cell-item" v-for="(item,index) in data">
<img v-if="item.img" :src="item.img" alt="加载错误" />
<div class="item-body">
<div class="item-desc">{{item.title}}</div>
<div class="item-footer">
<div class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
<div class="name">{{item.user}}</div>
<div class="like" :class="item.liked?'active':''" >
<i ></i>
<div class="like-total">{{item.liked}}</div>
</div>
</div>
</div>
</div>
</template>
</waterfall>
</div>
</template>
export default{
data(){
return{
data:[],
col:5,
}
},
computed:{
itemWidth(){
return (138*0.5*(document.documentElement.clientWidth/375)) #rem布局 计算宽度
},
gutterWidth(){
return (9*0.5*(document.documentElement.clientWidth/375)) #rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
}
},
methods:{
scroll(scrollData){
console.log(scrollData)
},
switchCol(col){
this.col = col
console.log(this.col)
},
loadmore(index){
this.data = this.data.concat(this.data)
}
}
}