CSS 3.0实现瀑布流布局

越陌度阡

发布于 2020-11-26 11:22:12

5040

发布于 2020-11-26 11:22:12

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

瀑布流布局是网页中常见的布局效果，一般我们都是用JS实现的，其实用CSS 3.0的属性也可以实现这个功能，并且还自带了响应式功能，效果如下：

以下是代码实现，欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS 3.0实现瀑布流布局</title>
        <style>
            h1{
                text-align: center;
            }
            .columns {
                /* 设置或检索对象每列的宽度 */
                column-width: 320px;
                /* 设置或检索对象的列与列之间的间隙 */
                column-gap: 15px;
                width: 90%;
                max-width: 1100px;
                margin: 50px auto;
            }

            .columns div {
                display: inline-block;
                /* box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); */

                /* 避免在元素内部断行并产生新列 */
                -webkit-column-break-inside: avoid;
               
                border-radius: 8px;
            }

            .columns div img {
                width: 100%;
                height: auto;
                margin-bottom: 15px;
                border-radius: 8px;
            }
        </style>
    </head>

    <body>
       
        <h1>瀑布流布局</h1>
        <div class="columns">
            <div>
                <img src="https://source.unsplash.com/random?city"/>
            </div>
            <div>
                <img src="https://source.unsplash.com/random?night"/>
            </div>
            <div>
                <img src="https://source.unsplash.com/random?developer"/>
            </div>
            <div>
                <img src="https://source.unsplash.com/random?building"/>
            </div>
            <div>
                <img src="https://source.unsplash.com/random?water"/>
            </div>
            <div>
                <img src="https://source.unsplash.com/random?coding"/>
            </div>
            <div>
                <img src="https://source.unsplash.com/random?stars"/>
            </div>
            <div>
                <img src="https://source.unsplash.com/random?forest"/>
            </div>
            <div>
                <img src="https://source.unsplash.com/random?girls"/>
            </div>
            <div>
                <img src="https://source.unsplash.com/random?working"/>
            </div>
        </div>
    </body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/06/10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

布局