纯css 利用多栏布局实现瀑布流 简略版

由于工作需要，今天尝试用纯css实现了一下瀑布流的布局，实现的原理是利用多栏布局配合break-inside属性，此种方式的实现代码非常简单，也不需要依赖任何插件，下面 先看一下实现的效果图：

 

下面贴上实现代码：

    
        
        
        
    
    
        

            

1

            

2

            

3

            

4

            

5

            

6

            

7

            

8

            

9

            

10

        

        
    

 

 

遗憾的是由于break-inside属性的兼容性不好，在不支持此属性的浏览器下面，就出不来瀑布流的效果了。 

更多其他方式的实现瀑布流可以参考下面的链接： https://www.w3cplus.com/css/pure-css-create-masonry-layout.html