ajax实现瀑布流加载,jQuery实现的瀑布流加载效果示例

本文实例讲述了jQuery实现的瀑布流加载效果。分享给大家供大家参考，具体如下：

demo.js：

$(function(){

$('img').load(function(){

var box = $('.box');

var boxHeight = {

leftBox:[],

centerBox:[],

rightBox:[]

}

for(var i=0;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;j

total += boxHeight.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;j

total += boxHeight.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;j

total += boxHeight.rightBox[j]+10;

}

box.eq(i).css('top',total+'px')

}

break;

}

}

});

});

demo.html：

waterFall

*{

padding: 0;

margin: 0;

}

.wrap{

position: relative;

}

.box{

position: absolute;

left: 0;

top: 0;

width: 250px;

}

.box img{

width: 250px;

}

1111111

22222222

33333333

4444444

55555555

666666666666

77777777

888888888888888

99999999999999

效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。