vue-waterfall-easy 2.x

1. 這是一個(gè)vue組件烁试，包含瀑布流布局和無限滾動(dòng)加載
2. 相比其他實(shí)現(xiàn)方式，無需在返回的數(shù)據(jù)中指定圖片的寬度和高度
3. 正是因?yàn)榈?條耳峦，所以采用的是圖片預(yù)加載之后蝶涩，再排版
4. 響應(yīng)式没讲，兼容移動(dòng)端
5. 支持無圖模式(@2.4.0)
6. 使用及其簡單

在線DEMO

Demo案例代碼

更新列表

github

1. 使用

1.1 npm安裝

npm install vue-waterfall-easy --save-dev

1.2 es6語法引用

import vueWaterfallEasy from 'vue-waterfall-easy'

export default {
  name: 'app',
  components: {
    vueWaterfallEasy
  }
}

1.3 js引用

下載vueWaterfallEasy.js

<script src="path/to/vue/vue.js"></script>
<script src="path/to/vueWaterfallEasy.js"></script>

new Vue({
  el: '#app',
  components: {
    vueWaterfallEasy
  }
})

1.4 支持 require.js sea.js 模塊引用

2. 基本示例

html

<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>

如果imgArr是替換更新轰驳，getData新請(qǐng)求返回的數(shù)據(jù)覆蓋原來的數(shù)據(jù)厚掷。

如果imgArr是增量更新，getData新請(qǐng)求返回的數(shù)據(jù)與原來的數(shù)據(jù)進(jìn)行合并级解，此時(shí)不建議使用替換更新冒黑，會(huì)浪費(fèi)性能。下面這個(gè)例子就是增量更新勤哗。

js

import vueWaterfallEasy from './vue-waterfall-easy/vue-waterfall-easy.vue'
import axios from 'axios'

export default {
  name: 'app',
  data() {
    return {
      imgsArr: [],
      group: 0, // request param
    }
  },
  components: {
    vueWaterfallEasy
  },
  methods: {
    getData() {
      axios.get('./static/mock/data.json?group=' + this.group) // 真實(shí)環(huán)境中抡爹，后端會(huì)根據(jù)參數(shù)group返回新的圖片數(shù)組，這里我用一個(gè)驚呆json文件模擬
        .then(res => {
          this.imgsArr = this.imgsArr.concat(res.data)
          this.group++
        })
    },
  },
  created() {
    this.getData()
  }
}

詳情見倉庫App.vue文件

3. 組件參數(shù)

waterfall組件祖先元素css樣式

詳情見 App.vue 文件

html,
body,
#app {
  height: 100%; // 父元素必須要有高度
  width: 100%; // 如果已經(jīng)是block元素咸包，則可以忽略
}

4. 事件

click事件使用實(shí)例

<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData" @click="clickFn"></vue-waterfall-easy>

  clickFn(event, { index, value }) {
    // 阻止a標(biāo)簽跳轉(zhuǎn)
    event.preventDefault()
    // 只有當(dāng)點(diǎn)擊到圖片時(shí)才進(jìn)行操作
    if (event.target.tagName.toLowerCase() == 'img') {
      console.log('img clicked',index, value)
    }
  }

5. 組件方法

5.1 waterfallOver

當(dāng)滾動(dòng)加載數(shù)據(jù)結(jié)束時(shí)嚷往，手動(dòng)調(diào)用葛账，將會(huì)取消滾動(dòng)加載

this.$refs.waterfall.waterfallOver()

詳情見倉庫App.vue文件

6. slot插槽

6.1 默認(rèn)slot

進(jìn)行自定義圖片的描述信息

參數(shù)說明

<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
  <div class="img-info" slot-scope="props">
    <p class="some-info">第{{props.index+1}}張圖片</p>
    <p class="some-info">{{props.value.info}}</p>
  </div>
</vue-waterfall-easy>

6.2 slot="loading"

自定義加載動(dòng)畫

<div slot="loading" slot-scope="{isFirstLoad}">
  <div slot="loading" v-if="isFirstLoad">first-loading...</div>
  <div v-else="v-else">loading...</div>
</div>

6.3 slot="waterfall-head"

容器頭部內(nèi)容插槽

<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
  <div slot="waterfall-head">waterfall-head</div>
</vue-waterfall-easy>

6.4 slot="waterfall-over"

調(diào)用waterfallOver方法后才會(huì)顯示皮仁，用于瀑布流結(jié)束提醒籍琳，默認(rèn)值是被你看光了

<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
  <div slot="waterfall-over">waterfall-over</div>
</vue-waterfall-easy>

7. 兼容移動(dòng)端

別忘記在index.html head中添加一下代碼

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">