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

import vueWaterfallEasy from 'vue-waterfall-easy'

export default {
 components: {
 vueWaterfallEasy
 } 
}

data () {
 return {
 imgsArr: [], //存放所有已加載圖片的數(shù)組（即當(dāng)前頁面會加載的所有圖片）
 fetchImgsArr: [] //存放每次滾動時下一批要加載的圖片的數(shù)組
 }
 },
　　methods: {
　　　initImgsArr (n, m) { //初始化圖片數(shù)組的方法，把要加載的圖片裝入
　　　　var arr = []
　　　　for (var i = n; i < m; i++) {
　　　　　　arr.push({ src: `static/img/${i + 1}.jpg`, link: '', info: '一些圖片描述文字' }) //src為加載的圖片的地址、link為超鏈接的鏈接地址、

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//info為自定義的圖片展示信息，請根據(jù)自己的情況自行填寫
　　　　}
　　　　return arr
　　　},

　　　fetchImgsData () { //獲取新的圖片數(shù)據(jù)的方法，用于頁面滾動滿足條件時調(diào)用
　　　　this.imgsArr = this.imgsArr.concat(this.fetchImgsArr) //數(shù)組拼接，把下一批要加載的圖片放入所有圖片的數(shù)組中
　　　}
　　},
　　created () {
　　　　this.imgsArr = this.initImgsArr(0, 10) //初始化第一次（即頁面加載完畢時）要加載的圖片數(shù)據(jù)
　　　　this.fetchImgsArr = this.initImgsArr(10, 20) // 模擬每次請求的下一批新的圖片的數(shù)據(jù)數(shù)據(jù)
　　}

<vue-waterfall-easy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData"></vue-waterfall-easy>

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

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")

props: {
 gap: { // 圖片間隔
 type: Number,
 default: 20
 },
 maxCols: { // 最大的列數(shù)
 type: Number,
 default: 5
 },
 imgsArr: { // 請求返回的圖片數(shù)據(jù)，格式：[{src:'1.jpg','link':'url1' info:'自定義圖片信息'},{src:'2.jpg','link':'url2',info:'自定義圖片信息'}...]
 type: Array,
 required: true
 },
 imgWidth: { // 指定圖片的統(tǒng)一寬度
 type: Number,
 default: 240
 },
 timeOut: { // 預(yù)加載事件小于500毫秒就不顯示加載動畫，增加用戶體驗
 type: Number,
 default: 500
 }
}