步骤一：安装依赖

 npm i vue-waterfall2@latest --save

步骤二：main.js中引入

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

属性

Events

举个栗子： 

      <waterfall :col="8" :data="[1,2,3,4,5,6,7,8,9,10,11]">
        <template>
          <div
            class="pr pbImgBox"
            v-for="(item,index) in [1,2,3,4,5,6,7,8,9,10,11]"
            :key="index"
          >
            <img :src="'images/'+item+'.jpg'" alt="加载错误" />
            <span class="textOver">夏热防暑误区热点公众号首图</span>
          </div>
        </template>
      </waterfall>

    import Vue from 'vue'
	export default{
	    data(){
	        return{
	            data:[],
	        }
	    },
	    computed:{
	      itemWidth(){  
	            return (138*0.5*(document.documentElement.clientWidth/375)) // #rem布局 计算宽度
	      },
	      gutterWidth(){
	            return (9*0.5*(document.documentElement.clientWidth/375))	//#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
	      }
	    },
        //下边的内容没有用到，需要的小伙伴可以看文档了解，如果需求后续回更新
	    methods:{
            scroll(scrollData){
                console.log(scrollData)
            },
	        switchCol(col){
	            this.col = col
	            console.log(this.col)
	      },
	      loadmore(index){
	            this.data = this.data.concat(this.data)
	      }
	    }
	}

效果图：

ps：

1、vue-waterfall2文档地址：https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md#vue-waterfall2

公司项目有这个需求就查了一下，帮助到我了，希望帮助到更多需要的小伙伴，好东西大家一起分享！！！