想必大家應該很多都已經習慣了jquery的DOM操作，jquery的瀑布流實現起來也很容易。

但是，隨著時代的發展，隨著時代的進步.....

算了算了，扯遠了，既然能找到這兒來，肯定是在vue.js上已經有一定的基礎了，咱們廢話不多說，直接進入主題。

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: {
  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