jquery时代大多使用插件实现瀑布流布局，但现在我们可以直接使用存粹的css来实现。从css3开始出现了column-count与column-gap后，我们便可直接使用此属性来进行布局，其中column-count代表列数，column-gap代表列之间的距离。值得注意的是，当使用column-count时，容器中不只一个元素时，列末尾容器中一部分元素可能会断裂至另一列中，为防止此种情况发生可以使用break-inside: avoid，避免容器断裂成两部分。
各大浏览器支持程度：

实例

步骤

1、给容器属性column-count与column-gap。
2、给容器中项目属性break-inside: avoid。

实现代码

  

    

      
      

        

          
          {{ tag }}
          
          
          
{{ item.tit }}
          
{{ item.con }}
          Detalies