尝试过几个瀑布流插件，这个插件还挺好用的。

1. npm安装

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

2. 直接看demo效果吧...

<template>
    <div id="wrap">
        <!-- 
            三、vue-virtual-collection
            vue-virtual-collection是一个用于有效渲染大型数据的Vue瀑布流组件。其原理上就是局部渲染和DOM回收，不会渲染全部数据，而是把当前视口中展示的Cell渲染出来，所以性能上比渲染全量数据要快太多了。
            安装：npm i vue-virtual-collection
         -->
        <h2 class="title">瀑布流vueWaterfallEasy</h2>
        <div class="btns">
          <button class="request" @click="request">重新请求数据</button>
          <button class="request" @click="del">删除1个数据</button>
        </div>
        
        <div id="container">
          <!-- 'photoBigUrl' 表源数据中的图片路径 -->
            <vue-waterfall-easy ref="waterfall" :imgsArr="imgsArr" :srcKey="'photoBigUrl'" @scrollReachBottom="getData" :maxCols="2" @click="clickFn" @imgError="imgErrorFn" :mobileGap="20" :reachBottomDistance="80" >
                <!-- 图片信息 -->
                <div class="img-info" slot-scope="props">
                    <p class="some-info">第 {{props.index + 1}} 张</p>
                    <p class="some-info">title: {{props.value.posterTitle || props.value.posterCreator}}</p>
                </div>
                <!-- 自定义结束文案 -->
                <div slot="waterfall-over">没有更多数据了</div>
            </vue-waterfall-easy>
        </div>
       
    </div>
</template>

<script>
import vueWaterfallEasy from "vue-waterfall-easy";
import axios from 'axios'
export default {
  name: "w1",
  data() {
    return {
      SERVICEURL: '接口',
      imgsArr: [],
      subjectId: "3", //主题id
      pageNumber: 1,
      SIZE: 30,
      requestFlag: true //默认可以请求
    };
  },
  components: {
    vueWaterfallEasy
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    getData(n) {
      /**  不再请求
       * 1.第一页没有数据
       * 2.请求的数据 未0 或者 小于 请求数量
       * 3.
       */
      if (!this.requestFlag) {
        this.$refs.waterfall.waterfallOver();
        return;
      }

      let _param = {
        pageNumber: this.pageNumber,
        pageSize: this.SIZE,
        posterCreator: "",
        subjectId: this.subjectId,
        type: 1
      };
      axios.post(this.SERVICEURL,_param).then((res)=>{
        console.log(res)
        let result = res.data
        if(!result || result.code != 10000){
          throw '请求结果错误'
        }
        if (result.code == 10000) {
          let _data = result.result;
          if (!_data.length) {
            this.requestFlag = false;
            this.$refs.waterfall.waterfallOver();
            return;
          }

          if (_data.length < this.SIZE) {
            this.requestFlag = false;
          }

          if (n == 2) {
            this.imgsArr = _data;
          } else {
            this.imgsArr = [...this.imgsArr, ..._data];
          }
          this.pageNumber++;
        }
      }).catch((err)=>{
          console.log(err)
        })
    },
    del() {
      this.imgsArr.splice(1, 1);
    },
    request() {
      // 重新获取数据，不能直接将数组置空。
      this.pageNumber = 1;
      this.subjectId = "25";
      this.getData(2);
    },

    clickFn(event, { index, value }) {
      // event.preventDefault()
      if (event.target.tagName.toLowerCase() == "img") {
        console.log("img clicked", index, value);
      }
    },
    imgErrorFn(imgItem) {
      console.log("图片加载错误", imgItem);
    }
  }
};
</script>

<style scoped>
.title {
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.8rem;
  background: #000;
}

#container {
  width: 100%;
  position: absolute;
  top: 0.8rem;
  bottom: 0.5rem;
  background: #f1f1f1;
  font-size: 0.26rem;
}

.btns{
  width: 100%;
  height: .6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}
.request {
  padding: 0 0.1rem;
  line-height: 0.4rem;
  border-radius: 0.3rem;
  background: #fff;
  color: #333;
}

.img-info{
  padding: .1rem;
}
</style>

以下是文档说明： 

组件参数
        width: 默认值(无)  容器宽度（px），默认是相对父元素宽度100%，由于响应式，此时其所有上级元素宽度必须都是相对浏览器窗口100%，具体看该表格下面实例。如果为定宽的话，必须设置width值，而不能只是其父元素设置定宽
        height:  默认值(无)  容器高度,值为Number类型时默认单位px，值为String类型时可指定单位, 当不传递height值时，默认是相对父元素高度100%，此时父元素必须具有高度
        gap:  默认值(20)  单位：px, pc端图片之间的间距
        mobileGap:  默认值(8)  单位：px, 移动端图片之间的间距
        imgsArr: 默认值([])   用于渲染瀑布流的数据
        srcKey: 默认值('src')   String 当你的图片地址键值不为src，可以使用该属性进行转换。如原始数据中的图片路径字段是photoPath，则传值'photoPath'。
        hrefKey:  默认值('href')  String 当你的图片地址键值不为href，可以使用该属性进行转换
        imgWidth:  默认值(240)  单位：px，图片的宽度
        maxCols:  默认值(5)   瀑布流显示最大的列数.
        linkRange： 默认值('card')   标识点击触发跳转链接范围，值有：
                        'card' 整张卡牌范围跳转链接
                        'img' 卡片内图片范围
                        custom 自定义可以通过slot插槽自定义跳转链接元素
        isRouterLink： 默认值(false)  值为false时渲染a标签，值为true时渲染router-link组件
        reachBottomDistance: 默认值(0)   单位：px，滚动触发scrollReachBottom事件时的距离容器底部的距离
        loadingDotCount: 默认值(3)   默认loading动画点的数量
        loadingDotStyle: 默认值(null)   默认loading动画内小圆点的样式对象，可以自定义其样式
        loadingTimeOut:  默认值(500)  单位：ms， 预加载事件小于500毫秒就不显示加载动画，增加用户体验
        cardAnimationClass:  默认值('default-card-animation')  用于给图片设置出现时的动画的calssName，如要去掉默认动画可以这样设置cardAnimationClass=""
        enablePullDownEvent:  默认值(false)  开启下拉事件

事件
        事件名	                    描述
        scrollReachBottom	滚动条滚动到底部时,用于请求新的图片数据
        preloaded	        每次图片预加载完成执行
        click	            当卡片被点击时触发，看下面的实例
        imgError	        图片加载错误事件，第一个参数可获取到当前加载错误图片的相关数据
        pullDownMove	    移动端生效，触摸下拉事件，第一个参数可获取Y轴移动距离差，常用于下拉刷新
        pullDownEnd	        移动端生效，触摸下拉事件手指抬起，常用于下拉刷新

click事件使用实例

        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData" @click="clickFn"></vue-waterfall-easy>
        
        clickFn(event, { index, value }) {
            // 阻止a标签跳转
            event.preventDefault()
            // 只有当点击到图片时才进行操作
            if (event.target.tagName.toLowerCase() == 'img') {
            console.log('img clicked',index, value)
            }
        }

 加载完，或者没有数据的时候要注意调用时机

组件方法
        5.1 waterfallOver
        当滚动加载数据结束时，手动调用，将会取消滚动加载
        改方法需要在  
                1.本次请求数据为空，立即调用。如果没有调用，loading会一直显示。
                2.请求数据时，判断不可再请求，调用改方法
        this.$refs.waterfall.waterfallOver()

1 默认slot
进行自定义图片的描述信息

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

        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
            <div class="img-info" slot-scope="props">
                <p class="some-info">第{{props.index+1}}张图片</p>
                <p class="some-info">{{props.value.info}}</p>
            </div>
        </vue-waterfall-easy>

2 slot="loading"
自定义加载动画

        <div slot="loading" slot-scope="{isFirstLoad}">
            <div slot="loading" v-if="isFirstLoad">first-loading...</div>
            <div v-else="v-else">loading...</div>
        </div>

3 slot="waterfall-head"
容器头部内容插槽
        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
            <div slot="waterfall-head">waterfall-head</div>
        </vue-waterfall-easy>

6.4 slot="waterfall-over"
调用waterfallOver方法后才会显示，用于瀑布流结束提醒，默认值是被你看光了
        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
            <div slot="waterfall-over">waterfall-over</div>
        </vue-waterfall-easy>


 兼容移动端
别忘记在index.html head中添加一下代码
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">