使用分栏布局实现瀑布流效果纯css实现瀑布流效果

　　本次QQ资源吧m.qqzy8.com ，使用纯css实现瀑布流，方便简单快捷。

　　下面我简单写了一个demo分享给大家

　　其中

　　column-count用来设置列数

　　column-gap用来设置列间距

　　break-inside:avoid; 避免在元素内部断行并产生新列

css代码

[lv]

<style>
    body{
        width: 100%;
        height: 100%;
        background: #000;
    }
    .box{
        width: 600px;
        background: #fff;
        margin: 0 auto;
        /*column-count用来设置列数*/
        column-count: 3;
        /*column-gap用来设置列间距*/
        column-gap: 0;
    }
    .box div{
        width: 150px;
        padding: 25px;
        /*避免在元素内部断行并产生新列*/
        break-inside: avoid;
    }
    .box div img{
        width: 100%;
    }
</style>

[/lv]

html代码

[lv]

<body>
    <div class="box">
        <div><img src="img/1.jpg"></div>
        <div><img src="img/2.jpg"></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"></div>
        <div><img src="img/5.jpg"></div>
        <div><img src="img/6.jpg"></div>
        <div><img src="img/7.jpg"></div>
        <div><img src="img/8.jpg"></div>
        <div><img src="img/9.jpg"></div>
        <div><img src="img/10.jpg"></div>
    </div>
</body>

[/lv]

最终效果图如下：