You can fill in the contents of the page to four Div, the waterfall flow pagination can be multiple pages (such as 5 pages) for two times paging, which can reduce the complexity of the background algorithm
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<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 () {
Initializing content
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 () {
The height of being swept away
var scrolltop = document.body.scrolltop| | Document.documentElement.scrollTop;
Page height
var pageheight = $ (document). Height ();
Visual area Height
var viewheight = $ (window). Height ();
alert (viewheight);
When you scroll to the bottom
if ((scrolltop+viewheight) > (pageHeight-20)) {
if (scrolltop<1000) {//Prevent unlimited growth
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> ");
});
}
}
}
});
});
/*
* Get the specified range of random numbers
* @param min, minimum value
* @param max, max value
*/
function Getrandom (Min,max) {
x upper limit, lower Y
var x = max;
var y = min;
if (x<y) {
X=min;
Y=max;
}
var rand = parseint (Math.random () * (x-y + 1) + y);
return to Rand;
}
</script>
<body>
<div id= "Main" >
<div class= "Flow" ></div>
<div class= "Flow" ></div>
<div class= "Flow" ></div>
<div class= "Flow" ></div>
</div>
</body>
