 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>waterfall flow</title> 
<script type="text/javascript" src="../jquery-1.8.0.min.js" /></script> 
<style type="text/css" > 
body{margin:0px;} 
#main{width:840px;margin:0 auto;} 
.flow{float:left;width:200px;margin:5px;background:#ABC;} 
</style> 
<script type="text/javascript" > 
$(document).ready(function(){ 
// 初始化內(nèi)容 
for(var i = 0 ; i < 3 ; i++){ 
$(".flow").each(function(){ 
$(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>"); 
}); 
} 

$(window).scroll(function(){ 
// 被卷去的高度 
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; 
// 頁(yè)面高度 
var pageHeight = $(document).height(); 
// 可視區(qū)域高度 
var viewHeight = $(window).height(); 
//alert(viewHeight); 
//當(dāng)滾動(dòng)到底部時(shí) 
if((scrollTop+viewHeight)>(pageHeight-20)){ 
if(scrollTop<1000){//防止無(wú)限制的增長(zhǎng) 
for(var i = 0 ; i < 2 ; i++){ 
$(".flow").each(function(){ 
$(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>"); 
}); 
} 
} 
} 
}); 
}); 
/* 
* 獲取指定范圍隨機(jī)數(shù) 
* @param min，最小取值 
* @param max，最大取值 
*/ 

function getRandom(min,max){ 
//x上限，y下限 
var x = max; 
var y = min; 
if(x<y){ 
x=min; 
y=max; 
} 
var rand = parseInt(Math.random() * (x - y + 1) + y); 
return rand; 
} 
</script> 
</head> 
<body> 
<div id="main"> 
<div class="flow" ></div> 
<div class="flow" ></div> 
<div class="flow" ></div> 
<div class="flow" ></div> 
</div> 
</body> 
</html> 