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个问题。
