vue.js组件vue-waterfall-easy实现瀑布流效果
前端之家收集整理的这篇文章主要介绍了
vue.js组件vue-waterfall-easy实现瀑布流效果，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_4030@想必大家应该很多都已经习惯了jquery的DOM操作，jquery的瀑布流实现起来也很容易。
@H4030@但是，随着时代的发展，随着时代的进步.....
@H403_0@算了算了，扯远了，既然能找到这儿来，肯定是在vue.js上已经有一定的基础了，咱们废话不多说，直接进入
主题。
@H_
4030@vue-waterfall-easy
@H4030@easy! easy! easy! 重要的事情说三遍！！！
@H4030@所以说，咱们今天用到的不是大家熟知的vue-waterfall，而是vue-waterfall-easy；
@H403_0@
一、获取vue-waterfall-easy组件
@H_
4030@这里有两种方式：
@H403_0@第一种就是直接从git上复制vue-waterfall-easy组件的完整
代码，粘贴为自己本地项目的组件(源码
链接：vue-waterfall-easy)，打开
链接，进入src/components/vue-waterfall-easy.vue，直接复制所有
代码即可。
@H_
4030@第二种是通过npm进行全局安装，直接用命令行在你的项目目录下执行：npm install vue-waterfall-easy --save-dev
@H403_0@执行成功后，在node
modules目录下会出现一个vue-waterfall-easy的目录（其实就是整个demo的实例源码）
@H403_0@
@H_
4030@二、局部引用vue-waterfall-easy组件
@H403_0@如果是直接复制的组件源码作为本地组件，那就直接与普通组件一样引入就可以了：
<div class="jb51code">
<pre class="brush:js;">
import vueWaterfallEasy from '你的路径/组件名.vue'
@H_
403_0@如果是通过npm安装的组件，那就更简单了：
@H_
403_0@直接这样就可以
调用到node_modules目录下打包好的vue-waterfall-easy组件了；
@H_
403_0@当然，引入组件之后一定不要忘记在当前组件中
注册该组件哦：
@H_
403_0@
三、定义需要用到的变量及方法
图片的数组（即
当前页面会加载的所有
图片）
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) // 模拟每次请求的下一批新的图片的数据数据
}
@H_
403_0@
四、模版中调用组件
@H_
403_0@想必大家都能看懂，这里不再赘述。如果你只是需要一个滚动无限加载的瀑布流
图片展示，到这一步就已经能满足需求了。当然，看过我发的源码
链接里的源码的小伙伴会发现源码中的App.vue模版中是这样引用的：
属性哦
#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}}
@H_
403_0@有了解过的小伙伴应该能看出来这里应用的是pug（也就是大名鼎鼎的jade，后来因为商标的原因改名为pug）的语法，至于为什么这样写，可以参见vue-waterfall-easy.vue源码的第81～90行以及github上（上面我给的
链接就是）文档的参数说明：
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")
@H_
403_0@注：报pug
错误的小伙伴请自行
百度下载pug依赖库
@H_
403_0@参数说明
@H_
403_0@
@H_
403_0@
五、运行项目
@H_
403_0@如果以上步骤没有出现问题的话，那么恭喜你，你已经可以看到自己的瀑布流了。当然，我们可以从文档中看到，我们还可以进行一些其他的配置：
@H_
403_0@组件参数
图片间隔
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
}
}
@H_
403_0@按照需求自行配置就可以了。
@H_
403_0@OK，到此，我们已经按照文档成功的“构建”了我们自己瀑布流组件了。当然，实际项目中我们的需求很可能不只是这样，我们还要自己做一些完善，这里我就不再多说，相信经过以上的讲解，大家已经对vue-waterfall-easy的套路有所了解，可以自己
解决如何满足项目需求的问题了。如果有什么不懂或者不知道如何完善以满足需求，可以在
评论中留下你的问题或者需求，我会很乐意帮助你的。
@H_
403_0@以上就是本文的全部
内容，希望对大家的学习有所帮助，也希望大家多多
支持编程之家。
