在VUE中实现瀑布流布局组件（附加完整演示项目）

瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。
下面是一个瀑布流布局的实现过程。

项目结构

我这里两列垂直布局

<template>
   <div class="fall-pic">
    <ul class="col left" ref="col1">
        <li class="item-pro" v-for="(item,keys) in dataList1" :key="keys">
          <img :src="item.picUrl" v-lazy="item.picUrl"/>
        </li>
    </ul>
    <ul class="col right" ref="col2">
        <li class="item-pro" v-for="(item,keys) in dataList2" :key="keys">
            <img :src="item.picUrl"  v-lazy="item.picUrl"/>
        </li>
    </ul>
  </div>
</template>

逻辑代码

首先定义好保存数据的数组

 data() {
   
      return {
   
        mainMenuList: [],//保存所有图片
        //保存渲染到页面上的图片
        dataList1: [],
        dataList2: [],
      }
    },

接着就是最重要的逻辑步骤了

    created(){
   
      this.initData();
    },
    methods: {
   
      async initData(){
   
        const {
   d