本文介绍了使用JavaScript实现瀑布流布局的方法，包括布局定义、元素创建、图片加载和排序策略。详细讲述了如何处理图片预加载、滚动加载以及优化排序效率，以达到良好的视觉效果和性能。
百度图片以及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>
最低0.47元/天 解锁文章
扫一扫
542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
