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

本文的示例说明了jQuery的瀑布加载的效果，供您参考，如下所示：

Demo.js：


$（函数（）{（））
$（'img）。负荷（函数（）{）
变量框= $（框）；
无功boxheight = { {
leftbox：{ }，
centerbox：{ }，
rightbox：{ }
}
对于（var i = 0；i < box.length；i++）{
var现在为i % 3；当前的值是0, 1, 2。
开关（现在）{
案例0：
Box.eq（我）。Css（右，'10px）；
BoxHeight.leftBox.push（box.eq（我）。Height（））；
VaR当下= math.floor（我/ 3）；
如果（当下= = 0）{
Box.eq（我），Css（' '，0）；
其他{ }
var总= 0；
对于（var j = 0；J <<当下；j++）{
总= boxheight leftbox { } + 10 J；
}
Box.eq（我），Css（前，总+ 'px）
}
打破；
案例1：
Box.eq（我）。Css（右，'270px）；
BoxHeight.centerBox.push（box.eq（我）。Height（））；
VaR当下= math.floor（我/ 3）；
如果（当下= = 0）{
Box.eq（我），Css（' '，0）；
其他{ }
var总= 0；
对于（var j = 0；J <<当下；j++）{
总= boxheight centerbox { } + 10 J；
}
Box.eq（我），Css（前，总+ 'px）
}
打破；
案例2：
Box.eq（我）。Css（右，'530px）；
BoxHeight.rightBox.push（box.eq（我）。Height（））；
VaR当下= math.floor（我/ 3）；
如果（当下= = 0）{
Box.eq（我），Css（' '，0）；
其他{ }
var总= 0；
对于（var j = 0；J <<当下；j++）{
总= boxheight rightbox { } + 10 J；
}
Box.eq（我），Css（前，总+ 'px）
}
打破；
}
}
}）；
}）；




Demo.html：






瀑布

* {
填充：0；
保证金：0；
}
包{。
职位：相对；
}
箱{。
位置：绝对；
左：0；
顶部：0；
宽度：250px；
}
。箱img {
宽度：250px；
}








一百一十一万一千一百一十一



二十二百万二十二万二千二百和二十二



三十三百万三十三万三千三百和三十三



四百四十四万四千四百四十四



五十五百万五十五万五千五百和五十五



六千六百六十六亿六千六百六十六万六千六百六十六



七十七百万七十七万七千七百和七十七



八百八十八兆八千八百八十八亿八千八百八十八万八千八百八十八



九十九万亿、九千九百九十亿零九百、九千九百九十九万九千零九和九十九








结果如下：



关于jQuery相关内容的更多读者感兴趣的读者可以看到特别站：

希望本文能对jQuery程序设计有所帮助。