本站停止维护,已转移至laravel学习网;欢迎大家移步访问!

css3使用column标签轻松实现瀑布流效果

现在,瀑布流效果真的是很火,一般使用中,我们都是使用js或者jq来实现瀑布流效果,其实我们用css3也能轻松实现瀑布流效果,column是块状布局,

属性描述CSS
column-count规定元素应该被分隔的列数。3
column-fill规定如何填充列。3
column-gap规定列之间的间隔。3
column-rule设置所有 column-rule-* 属性的简写属性。3
column-rule-color规定列之间规则的颜色。3
column-rule-style规定列之间规则的样式。3
column-rule-width规定列之间规则的宽度。3
column-span规定元素应该横跨的列数。3
column-width规定列的宽度。3
columns规定设置 column-width 和 column-count 的简写属性。3

这是他的一些基本标签,好的,我们进入正题,怎么用column实现瀑布流呢?其实我们只需要固定column-rule-width就可以了

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS3实现的瀑布流</title>
<link type="text/css" rel="stylesheet" href="css/waterfall.css" />
<style>
.container{
   -webkit-column-width:160px;
   -moz-column-width:160px; 
-webkit-column-gap:5px;
-moz-column-gap:5px;
}
/*数据块 砖块*/
.container div{
width:160px;
   margin:4px 0;
}
</style>
</head>
<body>
<div>
<div><img src="00.jpg" /></div>
<div><img src="01.jpg" /></div>
<div><img src="02.jpg" /></div>
<div><img src="03.jpg" /></div>
<div><img src="04.jpg" /></div>
<div><img src="05.jpg" /></div>
<div><img src="06.jpg" /></div>
<div><img src="07.jpg" /></div>
<div><img src="08.jpg" /></div>
<div><img src="09.jpg" /></div>
<div><img src="010.jpg" /></div>
<div><img src="011.jpg" /></div>
<div><img src="012.jpg" /></div>
<div><img src="013.jpg" /></div>
<div><img src="014.jpg" /></div>
<div><img src="015.jpg" /></div>
<div><img src="016.jpg" /></div>
<div><img src="017.jpg" /></div>
<div><img src="018.jpg" /></div>
<div><img src="019.jpg" /></div>
<div><img src="05.jpg" /></div>
</div>
</body>
</html>

好了,我们的瀑布流就实现了,是不是超简单?看下效果图屏幕快照-2016-09-26-下午11.07.39.png

转载请注明 :一沙网络原文出处:http://bbs.earnp.com/article/191
问题交流群 :562864481
0
打赏
发布时间 :2016-09-26 23:11:05
分享

0 个评论

    还没有评论,感觉来抢沙发吧!

要回复文章请先登录注册