Jquery implements simple waterfall stream code and jquery waterfall code
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]View plaincopy
- <! 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>
How to Write waterfall stream js Code
We recommend that you directly use the panel of ext.
Div css waterfall stream Layout
I have read that it is still a bit difficult to implement it with pure css. In fact, I cannot write it myself, because it is alignment on its top, feeling like no waterfall Flow
It is recommended that lz be implemented using js plug-ins
Search for the jquery. masonry jquery plug-in on the Internet and write it specifically for the waterfall stream. You can just reference the library and css code, which is the effect you want.
