vue.js组件vue-waterfall-easy实现瀑布流效果

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

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

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

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

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

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