想必大家應該很多都已經習慣了jquery的DOM操作，jquery的瀑布流實現起來也很容易。
但是，隨着時代的發展，隨着時代的進步.....
算了算了，扯遠了，既然能找到這兒來，肯定是在vue.js上已經有一定的基礎了，咱們廢話不多說，直接進入主題。
轉載請注明出處：http://www.cnblogs.com/meng1314-shuai/p/7407055.html ！！！！！
那些復制走了還故意把我的鏈接給去掉的人真的可恥。
vue-waterfall-easy
easy! easy! easy! 重要的事情說三遍！！！
所以說，咱們今天用到的不是大家熟知的vue-waterfall，而是vue-waterfall-easy；
一、獲取vue-waterfall-easy組件
這里有兩種方式：
第一種就是直接從git上復制vue-waterfall-easy組件的完整代碼，粘貼為自己本地項目的組件(源碼鏈接：vue-waterfall-easy)，打開鏈接，進入src/components/vue-waterfall-easy.vue，直接復制所有代碼即可。
第二種是通過npm進行全局安裝，直接用命令行在你的項目目錄下執行：npm install vue-waterfall-easy --save-dev
執行成功后，在node_modules目錄下會出現一個vue-waterfall-easy的目錄（其實就是整個demo的實例源碼）
二、局部引用vue-waterfall-easy組件
如果是直接復制的組件源碼作為本地組件，那就直接與普通組件一樣引入就可以了：
import vueWaterfallEasy from '你的路徑/組件名.vue'
如果是通過npm安裝的組件，那就更簡單了：
import vueWaterfallEasy from 'vue-waterfall-easy'
直接這樣就可以調用到node_modules目錄下打包好的vue-waterfall-easy組件了；
當然，引入組件之后一定不要忘記在當前組件中注冊該組件哦：
export default { components: { vueWaterfallEasy } }
三、定義需要用到的變量及方法
data () { return { imgsArr: [], //存放所有已加載圖片的數組（即當前頁面會加載的所有圖片） fetchImgsArr: [] //存放每次滾動時下一批要加載的圖片的數組 } },
methods: {
initImgsArr (n, m) { //初始化圖片數組的方法，把要加載的圖片裝入
var arr = []
for (var i = n; i < m; i++) {
arr.push({ src: `static/img/${i + 1}.jpg`, link: '', info: '一些圖片描述文字' }) //src為加載的圖片的地址、link為超鏈接的鏈接地址、
//info為自定義的圖片展示信息，請根據自己的情況自行填寫
}
return arr
},
fetchImgsData () { //獲取新的圖片數據的方法，用於頁面滾動滿足條件時調用
this.imgsArr = this.imgsArr.concat(this.fetchImgsArr) //數組拼接，把下一批要加載的圖片放入所有圖片的數組中
}
},
created () {
this.imgsArr = this.initImgsArr(0, 10) //初始化第一次（即頁面加載完畢時）要加載的圖片數據
this.fetchImgsArr = this.initImgsArr(10, 20) // 模擬每次請求的下一批新的圖片的數據數據
}
四、模版中調用組件
<vue-waterfall-easy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData"></vue-waterfall-easy>
想必大家都能看懂，這里不再贅述。如果你只是需要一個滾動無限加載的瀑布流圖片展示，到這一步就已經能滿足需求了。當然，看過我發的源碼鏈接里的源碼的小伙伴會發現源碼中的App.vue模版中是這樣引用的：
<template lang="pug"> //不要忽略這個語言屬性哦
#app h1.title vue-waterfall-easy demo vue-waterfall-easy(:imgsArr="imgsArr",@scrollLoadImg="fetchImgsData") template( scope="props") p.some-info 第{{props.index+1}}張圖片 p.some-info {{props.value.info}} </template>
</template>
有了解過的小伙伴應該能看出來這里應用的是pug（也就是大名鼎鼎的jade，后來因為商標的原因改名為pug）的語法，至於為什么這樣寫，可以參見vue-waterfall-easy.vue源碼的第81～90行以及github上（上面我給的鏈接就是）文檔的參數說明：
a.img-box( v-for="(v,i) in imgsArrC", :href="v.link", :style="{padding:gap/2+'px',width: isMobile ? '' : colWidth+'px'}" ) .img-inner-box div.img-wraper(:style="{width:imgWidthC+'px',height:v.height?v.height+'px':''}") img(:src="v.src") .img-info slot(:index="i",:value="v")
注：報pug錯誤的小伙伴請自行百度下載pug依賴庫
參數說明
| 參數 | 描述 |
|---|---|
| props.index | 圖片在數組中的索引，從0開始 |
| props.value | 遍歷參數imgsArr的元素值 |
五、運行項目
如果以上步驟沒有出現問題的話，那么恭喜你，你已經可以看到自己的瀑布流了。當然，我們可以從文檔中看到，我們還可以進行一些其他的配置：
組件參數
props: { gap: { // 圖片間隔 type: Number, default: 20 }, maxCols: { // 最大的列數 type: Number, default: 5 }, imgsArr: { // 請求返回的圖片數據，格式：[{src:'1.jpg','link':'url1' info:'自定義圖片信息'},{src:'2.jpg','link':'url2',info:'自定義圖片信息'}...] type: Array, required: true }, imgWidth: { // 指定圖片的統一寬度 type: Number, default: 240 }, timeOut: { // 預加載事件小於500毫秒就不顯示加載動畫，增加用戶體驗 type: Number, default: 500 } }
按照需求自行配置就可以了。
最終效果圖：
OK，到此，我們已經按照文檔成功的“構建”了我們自己瀑布流組件了。當然，實際項目中我們的需求很可能不只是這樣，我們還要自己做一些完善，這里我就不再多說，相信經過以上的講解，大家已經對vue-waterfall-easy的套路有所了解，可以自己解決如何滿足項目需求的問題了。如果有什么不懂或者不知道如何完善以滿足需求，可以在評論中留下你的問題或者需求，我會很樂意幫助你的。
轉載請注明出處：http://www.cnblogs.com/meng1314-shuai/p/7407055.html