vue.js实现瀑布流之vue-waterfall-easy

想必你们应该不少都已经习惯了jquery的DOM操做，jquery的瀑布流实现起来也很容易。

可是，随着时代的发展，随着时代的进步.....

算了算了，扯远了，既然能找到这儿来，确定是在vue.js上已经有必定的基础了，我们废话很少说，直接进入主题。

转载请注明出处：http://www.cnblogs.com/meng1314-shuai/p/7407055.html ！！！！！

那些复制走了还故意把个人连接给去掉的人真的可耻。

vue-waterfall-easy

easy! easy! easy! 重要的事情说三遍！！！

所以说，我们今天用到的不是你们熟知的vue-waterfall，而是vue-waterfall-easy；

1、获取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的实例源码）

 

2、局部引用vue-waterfall-easy组件

若是是直接复制的组件源码做为本地组件，那就直接与普通组件同样引入就能够了：

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

 若是是经过npm安装的组件，那就更简单了：

import vueWaterfallEasy from 'vue-waterfall-easy'

直接这样就能够调用到node_modules目录下打包好的vue-waterfall-easy组件了；

固然，引入组件以后必定不要忘记在当前组件中注册该组件哦：

export default {
  components: {
    vueWaterfallEasy
  }      
}

3、定义须要用到的变量及方法

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) // 模拟每次请求的下一批新的图片的数据数据
　　}

4、模版中调用组件

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

想必你们都能看懂，这里再也不赘述。若是你只是须要一个滚动无限加载的瀑布流图片展现，到这一步就已经能知足需求了。固然，看过我发的源码连接里的源码的小伙伴会发现源码中的App.vue模版中是这样引用的：

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

有了解过的小伙伴应该能看出来这里应用的是pug（也就是大名鼎鼎的jade，后来由于商标的缘由更名为pug）的语法，至于为何这样写，能够参见vue-waterfall-easy.vue源码的第81～90行以及github上（上面我给的连接就是）文档的参数说明：

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

注：报pug错误的小伙伴请自行百度下载pug依赖库

参数说明

参数	描述
props.index	图片在数组中的索引，从0开始
props.value	遍历参数imgsArr的元素值

5、运行项目

若是以上步骤没有出现问题的话，那么恭喜你，你已经能够看到本身的瀑布流了。固然，咱们能够从文档中看到，咱们还能够进行一些其余的配置：

组件参数

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的套路有所了解，能够本身解决如何知足项目需求的问题了。若是有什么不懂或者不知道如何完善以知足需求，能够在评论中留下你的问题或者需求，我会很乐意帮助你的。

 

 

转载请注明出处：http://www.cnblogs.com/meng1314-shuai/p/7407055.html