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

demo.js:

$(function(){ $('img ')).load(function(){ var box=$(').方框');var boxHeight={ leftBox:[]，centerBox:[]，right box :[]} for(var I=0；ibox . lengthi){ var now=I % 3；//现在的值为0,1,2开关（现在){ case 0: box.eq(i).css('left '，' 10px ')；BOx高度。左BOx。push(BOx。方程式(一)).高度());var now 2=数学。楼层(1/3)；if(now2==0){ box.eq(i).css('top '，0)；} else { var total=0；for(var j=0；jnow2j){ total=BoxHeight。left BOx[j]10；} box.eq(i).css('top '，total ' px ')} break；案例1: box.eq(i).css('左'，' 270 px ')；箱子高度。CenterBox。推(盒。方程式(一)).高度());var now 2=数学。楼层(1/3)；if(now2==0){ box.eq(i).css('top '，0)；} else { var total=0；for(var j=0；jnow2j){ total=BoxHeight。center box[j]10；} box.eq(i).css('top '，total ' px ')} break；案例2: box.eq(i).css('左'，' 530 px ')；箱子高度。右框。推(盒。方程式(一)).高度());var now 2=数学。楼层(1/3)；if(now2==0){ box.eq(i).css('top '，0)；} else { var total=0；for(var j=0；jnow2j){ total=BoxHeight。右框[j]10；} box.eq(i).css('top '，total ' px ')} break；} } });});演示。html:

！doctype html html lang=' en ' hearta charset=' UTF-8 '标题瀑布/title style * { padd : 0；保证金： 0；}.相对包装{位置：}。盒子{位置：绝对值；左： 0；top : 0；宽度： 250像素；}.box img { width : 250 px }/style script src=' http : jquery。js '/script script src=' http : demo。js '/script/head dydiv class=' wrap ' div class=' box ' img src=' http :1。jpg ' alt=' p 1111111/p/div class=' box ' img src=' http :2。jpg ' alt=' p 222222/p/div效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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