- 是一个vue组件，包含瀑布流布局和无限滚动加载
- 相比其他实现方式，无需在返回的数据中指定图片的宽度和高度
- 正是因为第2条，所以采用的是图片预加载之后，再排版
- 响应式，兼容移动端
- 使用及其简单
案例代码：请查看仓库目录 src/App.vue
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 | 每次图片预加载完成执行 |
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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent