CSS3瀑布流布局实现再详解

2018年06月20日 22:05:32益点益滴3679

瀑布流是图片展示网页常用的布局效果,在css3没有发布以前,实现这种布局需要用到js脚本代码,现在css3样式代码就可以轻松实现了。

主要用到的样式属性:

1、column-count:number|auto; 将容器中的子元素分为指定列数,使用默认值auto时需配合column-width设定

2、column-width:auto|length; 规定列宽,需自适应列数时可缺省column-count属性或设其值为auto

3、column-gap:length|normal; 规定列间隙

4、break-inside: avoid; 用于避免子元素内部断行产生新列

5、column-rule:column-rule-width column-rule-style column-rule-color; 规定列之间的宽度、样式和颜色规则,类似border属性

注意:Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性;Internet Explorer 10 和 Opera 支持 column-count 属性;Firefox 支持替代的 -moz-column-count 属性;Safari 和 Chrome 支持替代的 -webkit-column-count 属性。

以下为一个完整示例代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3瀑布流</title>
    <style>
    /*大层*/
    .container{width:80%;margin: 0 auto;}
    /*瀑布流层*/
    .waterfall{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari 和 Chrome */
        column-count:4;
        -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
    }
    /*一个内容层*/
    .item{
      padding: 1em;
      margin: 0 0 1em 0;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
     border: 1px solid #000;
    }
    .item img{
        width: 100%;
        margin-bottom:10px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="waterfall">
            <div class="item">
                <img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201804/jiaoben5879/img/01.jpg">
                <p>1 convallis timestamp</p>
           </div>
           <div class="item">
                <img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201804/jiaoben5879/img/10.jpg">
                <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
           </div>
           <div class="item">
                <img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201804/jiaoben5879/img/07.jpg">
                <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula 
        faucibus suscipit. Suspendisse rutrum turpis quis nunc 
        convallis quis aliquam mauris suscipit.</p>
           </div>
            <div class="item">
                <img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201804/jiaoben5879/img/11.jpg">
                <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
        sagittis vitae, egestas at augue. </p>
           </div>
            <div class="item">
                <img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201804/jiaoben5879/img/08.jpg">
                <p>a fermentum nisi. Integer dolor est, commodo ut 
        sagittis vitae, egestas at augue. </p>
           </div>
            <div class="item">
                <img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201804/jiaoben5879/img/13.jpg">
                <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
        sagittis vitae, egestas at augue. </p>
           </div>
            <div class="item">
                <img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201804/jiaoben5879/img/10.jpg">
                <p>fermentum nisi. Integer dolor est, commodo ut 
        sagittis vitae, egestas at augue. </p>
           </div>
           <div class="item">
                <img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201804/jiaoben5879/img/05.jpg">
                <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
           </div>
        </div>
    </div>
</body>
</html>


超赞,真给力!嗯,必须鼓励~

打赏0
账号:mxy310@163.com[复制]
账号:77940140[复制]