Test environment: ie8 ff13.0.1 chrome22
You can add the retrieved content by page to four divs in sequence. The pagination of the waterfall stream can be a second pagination in the unit of multiple pages (such as five pages), which can reduce the complexity of the background algorithm.
[Html]
<! 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 (){
// Initialize the 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 the volume
Var scrollTop = document. body. scrollTop | document.doc umentElement. scrollTop;
// Page height
Var pageHeight = $ (document). height ();
// Visible area height
Var viewHeight = $ (window). height ();
// Alert (viewHeight );
// When scrolling to the bottom
If (scrollTop + viewHeight)> (pageHeight-20 )){
If (scrollTop <1000) {// prevents 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> ");
});
}
}
}
});
});
/*
* Obtain random numbers within a specified range
* @ Param min, minimum value
* @ Param max, maximum value
*/
Function getRandom (min, max ){
// Upper limit of x and lower limit of 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>