这篇文章主要介绍vue.js组件vue-waterfall-easy如何实现瀑布流效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联-专业网站定制、快速模板网站建设、高性价比托克托网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式托克托网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖托克托地区。费用合理售后完善，十多年实体公司更值得信赖。
vue-waterfall-easy
easy! easy! easy! 重要的事情说三遍！！！
所以说，咱们今天用到的不是大家熟知的vue-waterfall，而是vue-waterfall-easy；
一、获取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的实例源码）
二、局部引用vue-waterfall-easy组件
如果是直接复制的组件源码作为本地组件，那就直接与普通组件一样引入就可以了：
import vueWaterfallEasy from '你的路径/组件名.vue'
如果是通过npm安装的组件，那就更简单了：
import vueWaterfallEasy from 'vue-waterfall-easy'
直接这样就可以调用到node_modules目录下打包好的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) // 模拟每次请求的下一批新的图片的数据数据
}四、模版中调用组件
想必大家都能看懂，这里不再赘述。如果你只是需要一个滚动无限加载的瀑布流图片展示，到这一步就已经能满足需求了。当然，看过我发的源码链接里的源码的小伙伴会发现源码中的App.vue模版中是这样引用的：
