纯CSS实现瀑布流布局

最新推荐文章于 2025-06-19 16:32:36 发布

我不是一个假前端

最新推荐文章于 2025-06-19 16:32:36 发布

阅读量427

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 文章标签：瀑布流响应纯css3

本文链接：https://blog.csdn.net/qq_36208461/article/details/80617746

css3 专栏收录该内容

4 篇文章

订阅专栏

首先一个页面的布局

<div id="container-pro">
    <div class="waterfall">
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>

    </div>
</div>

然后就是css啦

/*大层*/
#container-pro {
    width: 100%;
    margin: 0 auto;
}


/*瀑布流层*/
#container-pro .waterfall {
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari 和 Chrome */
    column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}


/*一个内容层*/
#container-pro .item {
    /*padding: 1em;*/
    margin: 0 0 1em 0;
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}


#container-pro .item img {
    width: 100%;
    margin-bottom: 10px
}

就这么简单，试试吧

如需转载，请注明出处： https://blog.csdn.net/qq_36208461/article/details/80617746