jquery瀑布流

<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>

转自 FungLeo's Blog