想必你们很多人都习惯了jquery的DOM操作，jquery的瀑布流很容易实现。

但是，随着时代的发展和时代的进步，

算了，跑题了，既然能在这里找到，那就一定要对vue.js有一定的基础，别废话了，直接进入正题吧。

vue-瀑布-简单

放松点。放松点。放松点。重要的事情说三遍！

所以，我们今天用的不是大家熟知的Vue-瀑布，而是Vue-瀑布-轻松；

I .获取易瀑布组件

这里有两种方法：

第一种是直接从git复制vue-falls-easy组件的完整代码，粘贴为自己本地项目的组件(来源链接：vue-falls-easy)，打开链接，输入src/components/vue-falls-easy . vue，直接复制所有代码。

第二种是通过npm进行全局安装，这是通过命令行在您的项目目录中直接执行的：NPM安装-瀑布-简单保存-开发

成功执行后，node_modules目录中会出现一个vue-falls-easy目录(实际上是整个演示的实例源代码)

第二，本地引用vue-瀑布-easy组件

如果是直接复制的组件源代码作为本地组件，可以直接作为通用组件引入：

从您的路径/组件名称中导入vueWaterfallEasy。如果是通过npm安装的组件，那就更简单了：

直接从' vue-瀑布-easy '导入vuewaterfallasy，这样就可以在node_modules目录下调用打包好的vue-瀑布-easy组件；

当然，在引入组件后，不要忘记在当前组件中注册该组件：

导出默认的{ components : { vuewaterfalleasy } } III。定义所需的变量和方法

Data () {return {imgsarr: []，//存储所有加载图片的数组(即当前页面将要加载的所有图片)fetchimgssarr :[]//存储下一批图片每次滚动要加载的数组}}，方法3360 {initimgsarr (n，m){//初始化图片数组I m；I){ arr . push({ src : ` static/img/$ { I 1 })。jpg `，link: ' '，info: '某些图片描述词' }) //src是加载图片的地址，link是超链接的链接地址，//info是自定义图片显示信息，请根据自己的情况填写}return arr }、fetchImgsData () {//获取新的图片数据，用来调用这个。imgsarr=这个。imgsarr.concat(这。fetchimgsdata)//页面滚动满足条件时的数组拼接。将下一批要加载的图片放入所有图片的数组中}}，created () {this。imgsarr=这个。initimgsarr (0，10)//初始化第一次加载的图片数据(即加载页面时)。这个。fetchimgsarr=这个。initimgsarr (10，20)//每次模拟

大家都能理解vue-瀑布-easy : img sarr=' img sarr ' @ scrolloadimg=' fetchimgsdata '/vue-瀑布-easy，这里就不赘述了。如果你只需要一个滚动无限负载的瀑布流的图片展示，就可以满足这一步的需求。当然，看过我发的源代码链接中的源代码的朋友会发现，源代码中的App.vue模板是这样引用的：

Template lang='pug' /不要忽略此语言属性# app h1 . title vue-falls-easy demovue-falls-easy(: img sarr=' img sarr '，@ scrolloadimg=' fetchimgsdata ')Template(scope=' props ')p . some-info the { { props . index 1 } } picture p . some-info { { props . value . info } }/Template/Template认识它的朋友应该能看到那个pug(也叫jade，后来改名为pug至于为什么这样写，请参考vue-falls-easy . vue源代码第81 ~ 90行和github上文档的参数描述(我上面给出的链接是):

a.img-box(v-for='(v，i) in imgsArrC '，href='v.link '， style=' { padd : gap/2 ' px '，width: isMobile '？ colWidth 'px'} ')。img-内盒div . img-wrapper(: style=' { width : imgwidthc ' px '，height:v.height？v .高度' px ' : ' ' } ')img(: src=' http :v . src ')。img-info槽(:索引=' I '，值=' v ')注：请百度下载pug依赖库。

参数描述

动词（verb的缩写）运行项目

如果以上步骤没有问题，恭喜你，你已经可以看到你的瀑布流了。当然，我们可以从文档中看到，我们还可以进行一些其他配置：

组件参数

Props: {gap: {//图片间隔类型： number，默认值： 20}，maxcols : {//最大列号类型： Number，默认值： 5}，ImgsArr: {//请求返回的图片数据，格式：[{src :' 1.jpg '，' link' :' URL 1' info : '自定义图片信息' }，{srcInfo:“自定义图片信息”}.] Type:array，required:true }，imgwidth 3360 {//指定图片的统一宽度Type:number，default3360 240}，TimeOut: {//如果预加载事件小于500毫秒，将不显示加载动画，将添加用户体验类型：number，默认值： 500}。

好了，在这里，我们已经根据文档成功地“构建”了自己的瀑布流组件。当然，在实际项目中，我们的需求可能不止这些。我们自己也要做一些改进，这里就不多说了。相信经过以上的讲解，大家都已经明白了vue-瀑布-easy的套路，能够自己解决如何满足项目需求的问题。如果您不了解或不知道如何改进以满足您的需求，您可以在评论中留下您的问题或需求，我将很乐意帮助您。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。