本文实例讲述了jQuery实现的瀑布流加载效果。分享给大家供大家参考，具体如下：
demo.js：
Box = $('.Box');
var BoxHeight = {
leftBox:[],centerBox:[],rightBox:[]
}
for(var i=0;i<Box.length;i++){
var now = i%3; //now的值为0，1，2
switch(now){
case 0:
Box.eq(i).css('left','10px');
BoxHeight.leftBox.push(Box.eq(i).height());
var now2 = Math.floor(i/3);
if(now2==0){
Box.eq(i).css('top',0);
}else{
var total = 0;
for(var j=0;jBoxHeight.leftBox[j]+10;
}
Box.eq(i).css('top',total+'px')
}
break;
case 1:
Box.eq(i).css('left','270px');
BoxHeight.centerBox.push(Box.eq(i).height());
var now2 = Math.floor(i/3);
if(now2==0){
Box.eq(i).css('top',0);
}else{
var total = 0;
for(var j=0;jBoxHeight.centerBox[j]+10;
}
Box.eq(i).css('top',total+'px')
}
break;
case 2:
Box.eq(i).css('left','530px');
BoxHeight.rightBox.push(Box.eq(i).height());
var now2 = Math.floor(i/3);
if(now2==0){
Box.eq(i).css('top',0);
}else{
var total = 0;
for(var j=0;jBoxHeight.rightBox[j]+10;
}
Box.eq(i).css('top',total+'px')
}
break;
}
}
});
});
demo.html：
<Meta charset="UTF-8">
waterFall
Box">
1111111
1111111
Box">
22222222
22222222
Box">
33333333
33333333
Box">
4444444
4444444
Box">
55555555
55555555
Box">
666666666666
666666666666
Box">
77777777
77777777
Box">
888888888888888
888888888888888
Box">
99999999999999
99999999999999