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

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

 

下面贴上实现代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>瀑布流</title>
        <style type="text/css">
            * {
                margin: 0px;
                height: 0px;
            }
            .flow-box{
                column-count:4;
                column-gap: 15px;
                width: 100%;
                
            }
            div {
                width: 300px;
                float: left;
                break-inside: avoid;
                box-sizing: border-box;
                margin: 10px;
            }
            #div1 {
                background: #4682B4;
                height: 100px;
            }
            #div2 {
                background: #4452B4;
                height: 350px;
            }
            #div3 {
                background: #4696B4;
                height: 250px;
            }
            #div4 {
                background: #4232B4;
                height: 180px;
            }
            #div5 {
                background: #7882B4;
                height: 100px;
            }
            #div6 {
                background: #4656B4;
                height: 250px;
            }
            #div7 {
                background: #4082B4;
                height: 300px;
            }
            #div8 {
                background: #468267;
                height: 120px;
            }
            #div9 {
                background: #463454;
                height: 180px;
            }
            #div10 {
                background: #8982B4;
                height: 220px;
            }
            
        </style>
    </head>
    <body>
        <section class="flow-box">
            <div id="div1">1</div >
            <div id="div2">2</div >
            <div id="div3">3</div >
            <div id="div4">4</div >
            <div id="div5">5</div >
            <div id="div6">6</div >
            <div id="div7">7</div >
            <div id="div8">8</div >
            <div id="div9">9</div >
            <div id="div10">10</div >
        </section>
        
    </body>
</html>

 

 

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

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