码迷,mamicode.com
首页 > Web开发 > 详细

使用css实现瀑布流布局

时间:2017-08-04 10:09:14      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:logs   span   containe   创建   margin   log   img   gap   图片   

css代码

.container{
-webkit-column-width:160px;
-moz-column-width:160px; 
-webkit-column-gap:5px;
-moz-column-gap:5px;
}


/*数据块 砖块*/

.container div{width:160px;
margin:4px 0;}

  

css写完了

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_010.jpg" /></div>
		<div><img src="images/P_011.jpg" /></div>
		<div><img src="images/P_012.jpg" /></div>
		<div><img src="images/P_013.jpg" /></div>
		<div><img src="images/P_014.jpg" /></div>
		<div><img src="images/P_015.jpg" /></div>
		<div><img src="images/P_016.jpg" /></div>
		<div><img src="images/P_017.jpg" /></div>
		<div><img src="images/P_018.jpg" /></div>
		<div><img src="images/P_019.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_010.jpg" /></div>
		<div><img src="images/P_011.jpg" /></div>
		<div><img src="images/P_012.jpg" /></div>
		<div><img src="images/P_013.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_010.jpg" /></div>
		<div><img src="images/P_011.jpg" /></div>
		<div><img src="images/P_012.jpg" /></div>
		<div><img src="images/P_013.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>

  这样就可以实现瀑布流布局;

  如果需要添加数据库中的图片

  使用js创建标签,添加到.container元素中即可


使用css实现瀑布流布局

标签:logs   span   containe   创建   margin   log   img   gap   图片   

原文地址:http://www.cnblogs.com/-123m/p/7283126.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!