CSS3 瀑布流布局演示

2014-04-07 09:18:44 -0400

代码说明

基于CSS3的瀑布流布局效果演示，瀑布流貌似现在比较火，最近用CSS3试着研究了一番，测试时候请使用火狐或chrome或世界之窗浏览器，若要使用IE浏览器查看本效果，请使用IE9以下版本的浏览器。转自源码爱好者

HTML代码

<style>
        .container{
                -webkit-column-width:160px;
                -moz-column-width:160px;
                -o-colum-width:160px;
                -webkit-column-gap:1px;
                -moz-column-gap:1px;
                -o-column-gap:1px;
        }
        div:not(.container){
                -webkit-border-radius:5px;
                -moz-border-radius:5px;
                border-radius:5px;
                background:#D9D9D9;
                border::#CCC 1px solid;
                display:inline-block;
                width:157px;
                position:relative;
                margin:2px;
        }
        .title{
                 line-height:80px; font-size:18px; color:#900;
                 text-align:center;
                 font-family:"Microsoft YaHei";
        }
</style>
</head>
<body>
<section>
        <div class="container">
            <div style="height:80px" class="title">纯CSS3瀑布布局</div>
        <div style="height:260px"></div>
        <div style="height:65px"></div>
        <div style="height:120px"></div>
        <div style="height:145px"></div>
        <div style="height:90px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
              <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:240px"></div>
    </div>
</section>
</body>

代码演示

纯CSS3瀑布布局

«Newer Older»

----Comments(2)----
耀眼阳光 (@luozhihao) | @ at 2014-04-07 09:43:
安卓手机可以看到效果

【飛龍在天】 (@891622172) | @ at 2014-04-07 09:25:
只有电脑有效果？？可是我的磨基本是手机党用户啊！这个……

Back to home

Subscribe | Register | Login | N