vue瀑布流組件vue-waterfall-easy 2

jquer有個瀑布流插件Masonry，能夠說是至關的好用，可是他是在操做dom的基礎上，在vue裏面就不怎麼實用了，在vue中，咱們可使用vue-waterfall-easy組件，看名字就能夠肯定，這個使用起來至關的easy啊！

• npm安裝

npm i vue-waterfall-easy --save-dev
複製代碼

• 調用

import vueWaterfallEasy from "vue-waterfall-easy";
複製代碼

• 註冊

new Vue({
    el:'#app',
    components:{
        vueWaterfallEasy
    }
)
複製代碼

• 簡單使用

//組件內調用
<vueWaterfallEasy :imgsArr="imgsarr"></vueWaterfallEasy>
複製代碼

• 參數

  1. weidth:數值；容器寬度
  2. height:數值或字符；容器高度
  3. gap:數值；pc端圖片之間的間距
  4. mobileGap:數值；移動端圖片之間的間距
  5. imgsArr:數組；渲染數據，每一項都是一個包含src和href屬性的對象，可替換；
  6. imgWidth：數值；圖片寬度
  7. maxCols：數值；最大列
  8. …………

• 事件

  1. scrollReachBottom : 滾動條事件
  2. preloaded : 圖片預加載完成執行
  3. click：圖片被點擊
  4. imgError： 圖片加載錯誤
  5. pullDownMove ：移動端觸摸下拉
  6. pullDownEnd：移動端觸摸下拉，手擡起

• 組件方法（滾動加載結束，手動調用以取消滾動加載）

this.$refs.waterfall.waterfallOver()
複製代碼

---

最後，留一個詳細文檔地址    在線文檔