CSS3编写的瀑布流代码 不用js即可实现
Div+Css教程
2014-08-26 14:28:51
244
首先先看看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等特效，改来改去麻烦的很。
不过话说回来，运用这些特效瀑布流会有更炫的效果。详情请期待明天学技巧的分享吧。