vue-waterfall2

  • 1.不需知道元素宽高,可宽高自适应
  • 2.自定义程度高,布局未采用绝对定位
  • 3.使用极为简便,适用于PC/ios/android
  • 4.提供Event:loadmore (pc/android端滑动到底部触发,ios端需要上拉触发)
  • 5.兼容性好,兼容ES5

有问题欢迎提issues、suggestions

移动端效果

Demo

Demo

GITHUB Thank you for your Star !

npm i 
npm run dev

Installation

 npm i vue-waterfall2@latest --save

Usage

注意:

  • 1.<font color=blue> gutterWidth需要与width一起使用才会生效,否则会进行自适应宽度(使用rem布局时,需先计算出自适应后的宽度再传值)</font>
  • 2.使用了<font color=red>waterfall</font>的<font color=red>父组件 style 不允许使用scoped</font>,否则样式会有问题
main.js
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
app.vue(此组件 style不使用 scoped)

/*
注意:
1.gutterWidth需要与width一起使用才会生效,否则会进行自适应宽度(使用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)) #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)
}
}
}" title="" data-original-title="复制">