css常用布局-多列布局(瀑布流)详解及案例

在浏览器中所展示的宽度差不多，高度参差不齐，整体又很美观，呈现出瀑布流，这样的布局都属于多列布局。

css布局的局限性是无法使用懒加载，js的瀑布流布局可以实现懒加载,详情请参考，https://www.cnblogs.com/piaoyi1997/p/12954660.html

css3-多列

多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。

多列属性

　　1、column-count

　　　属性规定元素应该被分隔的列数

　　2、column-gap

　　　属性规定列之间的间隔大小

　　3、column-rule　　　

　　设置或检索对象的列与列之间的边框。复合属性。
　　column-rule-color规定列之间规则的颜色。
　　column-rule-style规定列之间规则的样式。
　　column-rule-width规定列之间规则的宽度。

　　4、column-fill

　　设置或检索对象所有列的高度是否统一
　　auto：列高度自适应内容
　　balance：所有列的高度以其中最高的一列统一

　　5、column-span　　

　　设置或检索对象元素是否横跨所有列。
　　none：不跨列
　　all：横跨所有列

　　6、column-width

　　设置或检索对象每列的宽度

　　效果图如下所示：

 

 

具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body,html{
            width: 100%;
            height: 100%;
            background: url(./images/1.gif);
            background-size: 50% 50%;
        }
        .content{
            width: 100%;
            column-count: 5;
            column-gap: 0;           
        }
        .content div{
            border: 5px #eee solid;
            padding: 10px;
            margin: 0 5px 10px;
        }
        .content div img{
            width: 100%;
        }
        .content div p{
            text-align: center;
            font-size: 20px;
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="content">
        <div>
            <img src="./images/2.jpg" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/2.jpg" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/3.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/4.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/5.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/6.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/7.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/8.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/9.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/10.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/11.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/12.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/13.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/14.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/15.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/16.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/17.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/1.gif" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/2.jpg" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/3.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/4.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/5.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/6.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/7.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/8.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/9.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/10.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/11.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/12.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/13.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/14.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/15.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/16.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
        <div>
            <img src="./images/17.png" alt="">
            <p>今后余生，风雪是你</p>
        </div>
    </div>
</body>
</html>
 
如果感觉对自己有帮助，麻烦点一下关注，会一直盒大家分享知识的，谢谢！！！
posted @ 2020-04-15 14:31  飘逸_winxin  阅读(2042)  评论(0)  编辑  收藏  举报