CSS部分核心代码
<style type="text/css">
.case-list {position:relative;}
.case-list li {position:absolute;}
.case-list li img {width:200px;}
</style>
HTML部分核心代码
<ul class="case-list" id="case-list">
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
<li><img src="5.jpg" alt="" /></li>
<li><img src="6.jpg" alt="" /></li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var cases = $("#case-list li");
var case_h = [[],[],[],[]];
var sum = [0,0,0,0];
$.each(cases, function(i){
var m = i%4;
var step = Math.floor(i/4);
cases.eq(i).css("left", 220*m+"px");
case_h[m].push(cases.eq(i).height());
if(!step){
cases.eq(i).css("top", "0");
}else{
var num = 0;
for(var n=0; n<step; n++){
num += case_h[m][n] + 20;
}
cases.eq(i).css("top", num+"px");
}
});
$(case_h).each(function(i){
$(case_h[i]).each(function(j){
sum[i] += case_h[i][j];
});
});
cases.parent().css("height", sum.sort(function(a,b){return a<b?a:-1})[0]+100+"px");
});
</script>
JS部分解析：
注意：
必须把jquery写在前面，js代码写在后面。
在360急速浏览器中，把jquery库本地化，会布局混乱，而把本地的jquery库文件名命名为jquery.min.js则时而正常，时而混乱；把jquery和JS代码放在头部也会布局混乱，好像必须放在底部似的；在火狐浏览器中不存在以上2个问题。
