真的！！！两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点！

<style scoped> 
  .waterfall-container {    
     /*分几列*/
    column-count: 2;
  }  
 
  .waterfall-item {    
     /*不留白，不知道什么意思可以取消这个样式试试*/
    break-inside: avoid;
  }
</style>

/*列间距，可有可无，默认30px*/
/*column-gap: 0;*/

const oldList = [1, 2, 3, 4, 5, 6, 7]

// 使用reduce函数接受一个初始值{ 0: [], 1: [], length: 2 },
// 初始值包含两个空数组，和一个数组长度(Array.from方法要求将对象转数组时对象内要有这个属性)
// 在reduce函数内根据索引做余2判断，因为分两，余0的加入第一个数组，余1的加入第二个数组
// 最后reduce返回遍历完的对象 {0:[1,3,5,7],1:[2,4,6],length:2}
// 使用Array.from({0:[1,3,5,7],1:[2,4,6],length:2}) 得到 数组 [[1,3,5,7],[2,4,6]]
// 解构数组 使用concat合并，完事
const newList = [].concat(...(Array.from(oldList.reduce((total, cur, index) => {
  total[index % 2].push(cur)  
  return total
}, { 0: [], 1: [], length: 2 }))))

console.log(newList)

[1, 3, 5, 7, 2, 4, 6]

-moz-column-count:3; /* Firefox */、
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;

<div class="waterfall-container">
    <div class="waterfall-item" v-for="i in 100"> vue的语法，不会就粘贴20个div看效果
        内容... 这里可以自己实现宽高不一样的div，看效果
    </div>
</div>

.row{    
    display:flex;
    flex-direction:row;
}

<row>
    <col width=50%>
         <div v-for='i fo 50'>
    </col>
    <col width=50%>
        <div v-for='i fo 50'>
    </col>
</row>