<style>
li,ul{
list-style-type: none;
}
*{
margin:0;
padding:0
}
html,body,#waterfall{
width:100%;
height:100%;
}
.piclist{
margin:auto;
position:relative;
}
.piclist li{
width:180px;
padding:10px;
border-radius: 5px;
box-shadow:0 0 4px #ddd;
position: absolute;
}
.piclist li img {
display: block;
width:180px;
}
.piclist .li span {
display: block;
text-align: center;
height: 26px;
overflow: hidden;
line-height: 26px;
}
</style>
<div id="waterfall">
<ul class="piclist">
<li><img src="images/1.jpg" alt="" /><span>瀑布流测试1</span></li>
<li><img src="images/2.jpg" alt="" /><span>瀑布流测试2</span></li>
<li><img src="images/3.jpg" alt="" /><span>瀑布流测试3</span></li>
<li><img src="images/4.jpg" alt="" /><span>瀑布流测试4</span></li>
<li><img src="images/5.jpg" alt="" /><span>瀑布流测试5</span></li>
<li><img src="images/6.jpg" alt="" /><span>瀑布流测试6</span></li>
</ul>
</div>
<script>
$(function(){
var obj = $('#waterfall'),
ul = obj.find('ul.piclist'),
li = ul.find('li');
$(window).load(function(){
waterfall();
})
$(window).resize(function(){
waterfall();
})
function waterfall(){
var WinW = $(window).width();
var blank = 20,
LiW = 200 + blank,
LiCol =parseInt(WinW/LiW),
UlW = LiCol * LiW - blank;
ul.width(UlW);
var AllLi = [];
li.each(function(index,e){
var T = $(this);
if(index < LiCol){
AllLi[index] = T.outerHeight();
T.css({
top:0,
left:LiW * index + 'px'
})
}else{
var MinH = Math.min.apply(null,AllLi);
var MinI = $.inArray(MinH,AllLi);
var ThisH = T.outerHeight() + blank;
AllLi[MinI] = parseInt(MinH + ThisH);
T.css({
top:MinH + blank + 'px',
left:LiW * MinI + 'px'
})
}
})
}
})
</script>