vue.js實現瀑布流之vue-waterfall-easy

想必你們應該不少都已經習慣了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；

1、獲取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的實例源碼）

 

2、局部引用vue-waterfall-easy組件

若是是直接複製的組件源碼做爲本地組件，那就直接與普通組件同樣引入就能夠了：

import vueWaterfallEasy from '你的路徑/組件名.vue'

 若是是經過npm安裝的組件，那就更簡單了：

import vueWaterfallEasy from 'vue-waterfall-easy'

直接這樣就能夠調用到node_modules目錄下打包好的vue-waterfall-easy組件了；

固然，引入組件以後必定不要忘記在當前組件中註冊該組件哦：

export default {
  components: {
    vueWaterfallEasy
  }      
}

3、定義須要用到的變量及方法

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) // 模擬每次請求的下一批新的圖片的數據數據
　　}

4、模版中調用組件

<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的元素值

5、運行項目

若是以上步驟沒有出現問題的話，那麼恭喜你，你已經能夠看到本身的瀑布流了。固然，咱們能夠從文檔中看到，咱們還能夠進行一些其餘的配置：

組件參數

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