首先非常感谢网友sole的无私分享，此Jquery特效是我从互联网上看到的，看到代码写得非常精简，实现瀑布流布局的Jquery代码仅有23行，个人感觉非常棒，后来跟原创作者网友sole留了个言是否可以把此作品分享到JquerySchool网站上，让更多的网友也可以学习，今天看到了回复可以之后就马上整理出来分享出来给大家学习用。。。
23行核心代码如下：
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");
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
瀑布流 网友sole 图片特效 Jquery.masonry json数据解析