vue-waterfall-rapid
??一款基于vue的瀑布流組件，支持各種使用場景，靈活度高，簡單易用。
1.支持沒有圖片高度 && 不影響渲染速度。
2.支持自由綁定動畫。
3.支持根據(jù)容器改變自適應。
4.支持無圖。
github https://github.com/1977474741/vue-waterfall-rapid
Demo https://coding-pages-bucket-415964-8382475-13401-506140-1252701316.cos-website.ap-hongkong.myqcloud.com
使用
1.安裝
npm i vue-waterfall-rapid
2.示例
template
<div class="main" @scroll="scroll">
<waterfall :col="col" :autoResize="autoResize" :moveTransitionDuration="0.4" :fillBox="fillBox" :col-width="colWidth" :list="list" ref="waterfall" imgKey="src">
<!-- 兩種圖片綁定模式
1.指定圖片的Key（ imgKey="src"）
2.在img標簽上加class（ class="waterfall-img"） -->
<!-- img標簽如果設(shè)置寬高會渲染的更快 -->
<div class="waterfall-item" :class="{bounceIn:item.state == 'show'}" slot-scope="item">
<img v-if="item.data.src" style="width: 100%" class="waterfall-img" :src="item.data.src">
{{item.index}}-{{item.data.text}}
</div>
</waterfall>
</div>
javascript
import waterfall from 'vue-waterfall-rapid'
export default {
name: 'vue-waterfall-rapid',
components: {
waterfall
},
data(){
return{
//是否根據(jù)容器尺寸自動計算重繪
autoResize:true,
//是否始終填滿容器
fillBox: false,
//列寬-有指定列數(shù)則此屬性失效
colWidth: window.innerWidth / 5,
//列數(shù)
col: 0,
//圖片數(shù)據(jù)
list: []
}
},
mounted(){
this.$refs.waterfall.onRender = (res)=>{
console.log('渲染完畢',res);
}
},
methods:{
scroll(e){
// console.log(e)
}
}
}
插槽內(nèi)屬性（slot-scope）
{
index: 0, //當前元素下標
data: {}, //當前元素數(shù)據(jù)
state: 'show', //當前元素的渲染狀態(tài)
}
/**
* state對應值說明：
* 'complete'， // 元素內(nèi)圖片加載完成
* 'show'， // 元素顯示（可以用來綁定顯示動畫）
*/
參數(shù)
| 屬性 | 類型 | 缺省值 | 描述 |
|---|---|---|---|
| list | Array | [] | 要渲染的數(shù)據(jù) |
| imgKey | String | src | 指定圖片在list里的key（或者在img標簽上加 class="waterfall-img"） |
| col | Number | 3 | 列數(shù)，手動設(shè)置時會覆蓋掉colWidth |
| colWidth | Number | 0（px） | 列寬，和col沖突時，col優(yōu)先 |
| autoResize | Boolean | false | 是否隨容器寬度變化重繪 |
| fillBox | Boolean | false | 是否填充滿容器 |
| moveMode | String | transform | 定位方式（transform、convention） |
| moveTransitionDuration | Number | 0.4（s） | 位置變化時的過渡時間 |
函數(shù)
| 函數(shù)名 | 參數(shù) | 返回值 | 描述 |
|---|---|---|---|
| repaints | start（開始的下標），duration（過渡時間 s） | 無 | 手動重繪 |
事件
| 屬性名 | 值 | 回調(diào)內(nèi)返回值 | 描述 |
|---|---|---|---|
| onRender | callback | { cause（導致渲染的原因），start（開始渲染的下標） } | 渲染完畢事件 |
/**
* cause對應值說明：
* 'data'， // 數(shù)據(jù)改變
* 'resize'， // 容器寬度改變
*/
有更好的建議歡迎提issues或者提pr
