首页 > 代码库 > 使用css实现瀑布流布局
使用css实现瀑布流布局
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="http://www.mamicode.com/images/P_00.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_01.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_02.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_03.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_04.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_05.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_06.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_07.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_08.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_09.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_010.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_011.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_012.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_013.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_014.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_015.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_016.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_017.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_018.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_019.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_05.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_06.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_07.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_08.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_09.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_010.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_011.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_012.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_013.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_05.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_06.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_07.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_08.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_09.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_010.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_011.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_012.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_013.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_03.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_04.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_05.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_06.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_07.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_08.jpg" /></div> <div><img src="http://www.mamicode.com/images/P_09.jpg" /></div> </div>
这样就可以实现瀑布流布局；
如果需要添加数据库中的图片
使用js创建标签，添加到.container元素中即可
使用css实现瀑布流布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。