duhl / vue-waterfall-easy

vue瀑布流组件(vue waterfall component)

vue-waterfall-easy介绍

1. 是一个vue组件，包含瀑布流布局和无限滚动加载
2. 相比其他实现方式，无需在返回的数据中指定图片的宽度和高度
3. 正是因为第2条，所以采用的是图片预加载之后，再排版
4. 响应式，兼容移动端
5. 使用及其简单

DEMO

案例代码：请查看仓库目录 src/App.vue

支持vue2.1+

GITHUB

vue-waterfall-easy使用

npm安装

npm install vue-waterfall-easy --save-dev

局部引用

import vueWaterfallEasy from 'vue-waterfall-easy'

export default {
  name: 'app',
  components: {
    vueWaterfallEasy
  }
}

组件参数

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

事件

事件名	描述
scrollLoadImg	滚动条滚动到底部时,用于请求新的图片数据
preloaded	每次图片预加载完成执行

通过slot进行自定义图片描述信息

pug

vue-waterfall-easy(:imgsArr="imgsArr",@scrollLoadImg="fetchImgsData")
  template( scope="props")
    p.some-info 第{{props.index+1}}张图片
    p.some-info {{props.value.info}}

参数说明

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

兼容移动端

别忘记在index.html head中添加一下代码

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

关于数据请求的约定

新请求返回的数据与原来的数据进行合并 详情见仓库 App.vue文件

this.imgsArr = this.imgsArr.concat(this.fetchImgsArr)