专注前端,专注网页设计制作 - (网页制作/模板制作/设计) QQ:755150799 织梦模板 | 网页特效 | 网站模板 | 建站教程 | TOP排行榜 | Tag标签 | 联系我们
当前位置: 网站首页 > 建站教程 > Div+Css教程 > >

CSS3编写的瀑布流代码 不用js即可实现

时间:2014-08-26来源:学技巧网站制作 作者:学技巧 阅读: 次 【 点评一下

首先先看看css里的代码:

.container{
    -webkit-column-width:160px; /* Safari 和 Chrome */
    -moz-column-width:160px; /* Firefox */
      -webkit-column-gap:5px;/* Safari 和 Chrome */
      -moz-column-gap:5px;/* Firefox */
}
/*数据块 砖块*/
.container div{width:160px;
               margin:4px 0;}


从以上的注释大家可以看的明白吧,css3针对火狐谷歌和safari定义的宽度属性和各个元素之间的间隔,以我的理解就是-webkit-column-gap:5px;      -moz-column-gap:5px;
}这两个就是间距的定义。

下面看看html里的代码部分:


<body>
    <div class="container">
        <div><img src="images/P_00.jpg" /></div>
        <div><img src="images/P_01.jpg" /></div>
        <div><img src="images/P_02.jpg" /></div>
        <div><img src="images/P_03.jpg" /></div>
        <div><img src="images/P_04.jpg" /></div>
        <div><img src="images/P_05.jpg" /></div>
        <div><img src="images/P_06.jpg" /></div>
        <div><img src="images/P_07.jpg" /></div>
        <div><img src="images/P_08.jpg" /></div>
        <div><img src="images/P_09.jpg" /></div>
        <div><img src="images/P_09.jpg" /></div>
    </div>
</body>

自己可以复制代码,然后找点图片,宽高不用管,然后在html里添加这些图片,图片越多越好,这样才能看出瀑布流的效果。之前学技巧一直感觉瀑布流很高大上,自从知道css3也能写出个瀑布流,心里那个美啊,在也不用那么麻烦的搞js或者jquery等特效,改来改去麻烦的很。
不过话说回来,运用这些特效瀑布流会有更炫的效果。详情请期待明天学技巧的分享吧。


分享到:
  • 用微信  “扫一扫”

    将文章分享到朋友圈。

    关注公众号:xue-jiqiao

本文版权归原作者所有,转载请注明原文来源出处,学技巧网站制作感谢您的支持!