vue-waterfall2 基於Vue.js 瀑布流元件

摘要： 1.寬度自適應,資料繫結 2.自定義程度高 3.使用極為簡便,適用於PC/移動端 4.提供resize(強制重新整理佈局)/mix(擾亂佈局) API，一般情況下不需要用到 5.後期將持續更新，提供animation（過渡動畫） Demo ...

• 1.寬度自適應,資料繫結
• 2.自定義程度高
• 3.使用極為簡便,適用於PC/移動端
• 4.提供resize(強制重新整理佈局)/mix(擾亂佈局) API，一般情況下不需要用到
• 5.後期將持續更新，提供animation（過渡動畫）

Demo

ofollow,noindex">demo

Installation

npm install --save vue-waterfall2
複製程式碼

Usage

注意: 1.itemWidth需要與gutterWidth一起使用才會生效，否則會進行自適應寬度(使用rem佈局時，需先計算出高度再傳值) 2.使用了waterfall的元件不允許使用scoped,否則樣式會有問題

main.js

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
複製程式碼

app.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':gutterWidth="gutterWidth":data="data" @finish="finish">
<template >
<div class="cell-item" v-for="(item,index) in data">
<img :src="item.img"/>
<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>


/*
注意:
1.itemWidth需要與gutterWidth一起使用才會生效，否則會進行自適應寬度(使用rem佈局時，需先計算出高度再傳值)
2.使用了waterfall的元件不允許使用scoped,否則樣式會有問題
*/

import Vue from 'vue'
export default{
data(){
return{
data:[],
col:'5',
}
},
computed:{
itemWidth(){
return (138*0.5*(document.documentElement.clientWidth/375)).toString()#rem佈局 計算寬度
},
gutterWidth(){
return (9*0.5*(document.documentElement.clientWidth/375)).toString()#rem佈局 計算x軸方向margin(y軸方向的margin自定義在css中即可)
}
},
methods:{
mix(){
this.$waterfall.mix()
},
switchCol(col){
this.col = col
console.log(this.col)
},
loadmore(index){
this.data = this.data.concat(this.data)
},
finish(){
console.log('finish')
}
},
複製程式碼

Props

Name	Default	Type	Desc
col	'2'	String	the number of column
width	null	String	the value of width
gutterWidth	10	String	the value of margin
data	[]	Array	data