import vueWaterfallEasy from '你的路径/组件名.vue'

import vueWaterfallEasy from '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>

<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 "
 )
 .img-inner-box
 div.img-wraper(:style="{width:imgWidthC+'px',height:v.height")
 img(:src="/UploadFiles/2021-04-02/v.src">

注：报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的套路有所了解，可以自己解决如何满足项目需求的问题了。如果有什么不懂或者不知道如何完善以满足需求，可以在评论中留下你的问题或者需求，我会很乐意帮助你的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。