两行css代码实现瀑布流，html,css最简单的瀑布流实现方式！

<style> 
  .waterfall-container {    
     /*分几列*/
    column-count: 2;
  }  
 
  .waterfall-item {    
     /*不留白，不知道什么意思可以取消这个样式试试*/
    break-inside: avoid;
  }
  /*列间距，可有可无，默认30px*/
	/*column-gap: 0;*/
</style>
           

效果如图

html

<div class="waterfall-container">
    <div class="waterfall-item">
       这里可以自己实现宽高不一样的div，随便复制十几个看效果,
    </div>
</div>
           

有个坑就是：这个列表显示顺序是 左边 123右边456，不符合正常展示逻辑；然后可以使用js对数据进行预处理，具体的自己操作处理；