测试环境:ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 复制代码 代码如下: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> waterfall flow <br>body{margin:0px;} <br>#main{width:840px;margin:0 auto;} <br>.flow{float:left;width:200px;margin:5px;background:#ABC;} <br> <br>$(document).ready(function(){ <br>// 初始化内容 <br>for(var i = 0 ; i < 3 ; i ){ <BR>$(".flow").each(function(){ <BR>$(this).append("<div style="width:90%;height:" getRandom(200,300) "px;margin:5px auto;background:#159;"></div>"); <br>}); <br>} <br><br>$(window).scroll(function(){ <br>// 被卷去的高度 <br>var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; <br>// 页面高度 <br>var pageHeight = $(document).height(); <br>// 可视区域高度 <br>var viewHeight = $(window).height(); <br>//alert(viewHeight); <br>//当滚动到底部时 <br>if((scrollTop viewHeight)>(pageHeight-20)){ <br>if(scrollTop<1000){//防止无限制的增长 <BR>for(var i = 0 ; i < 2 ; i ){ <BR>$(".flow").each(function(){ <BR>$(this).append("<div style="width:90%;height:" getRandom(200,300) "px;margin:5px auto;background:#159;"></div>"); <br>}); <br>} <br>} <br>} <br>}); <br>}); <br>/* <br>* 获取指定范围随机数 <br>* @param min,最小取值 <br>* @param max,最大取值 <br>*/ <br><br>function getRandom(min,max){ <br>//x上限,y下限 <br>var x = max; <br>var y = min; <br>if(x<y){ <br>x=min; <br>y=max; <br>} <br>var rand = parseInt(Math.random() * (x - y 1) y); <br>return rand; <br>} <br>