CSS3编写的瀑布流代码 不用js即可实现
首先先看看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
本文版权归原作者所有,转载请注明原文来源出处,学技巧网站制作感谢您的支持!
发表评论:
最新建站教程
猜你也喜欢看这些