百度图片以及qq空间等还有一些像蘑菇街 发现啦之类的网站都用的是瀑布流布局模式,这种模式优点就是合理动态布局,使得图片页面表现有很强的视觉感染力,可以使得客户快速发现自己喜欢的图片。
并且大量图片处理时候减少浏览器处理图片消耗;在操作效果上像瀑布似的哗哗的出现图片 故而得此名(纯属想象)
闲来之余,实现一个自己的瀑布流demo,发现一些问题 总结一些经验,统统分享给大家:
先看看效果欣赏一下美图。。。
实现思路如下:
先把html页面摆上吧:
<style type="text/css">*{padding:0;margin:0;}
#wrap{
margin:0 auto;
}
#wrap li{
width:220px;
float:left;
list-style:none;
margin:5px;
box-shadow: 0 1px 3px rgba(34,25,25,.4);
background:#eee;
/*margin:5px;*/
/*border:1px solid #ccc;*/
background:#eee;
}
.boxCont{
position:relative;
margin:0,auto;
background:#eee;
min-height: 200px
}
#wrap p{
text-align: center;
height: 30px;
font: 14px 微软雅黑;
}
#wrap img{
display:block;
position: relative;
z-index: 1;
text-align: center;
margin: 0 auto;
padding: 10px;
max-width: 220px;
background:#eee;
}
</style>
<body>
<ul id="wrap"></ul>