The waterfall flow effect of jquery, scroll down to load content instantly

Loads new content dynamically as the drop-down scroll bar or mouse wheel scrolls to the bottom of the page.

The background uses JSON to transfer data, and the example program only writes sample arrays. The data is also set to only two attributes, which need to be rewritten according to the actual application.   page with UL Li as a container, each Li represents a column  <ul id= "stage" >      <li></li>      <li></li>      <li></li>      <li></li>  </ Ul> &NBSP;&NBSP;&NBSP;JS Code  /* @ version Date: version Date: April 11, 2012  @ Copyright: 1024x768 Intelligence (HTTP// www.1024i.com)    obtain permission to use the library, you must retain the copyright notice .  Report The vulnerability, comments or suggestions, please contact Lou Barnes ([email protected])  * / $ (document). Ready (function () {     loadmore ();  });     $ (window). Scroll (function () {    //when scrolling to the bottom 100 pixels, load new content      if ($ (document). Height ()-$ (this). ScrollTop ()-$ (this). Height () <100) Loadmore ();  });      function Loadmore ()  {     $.ajax ({         URL: ' data.php ',          dataType: ' JSON ',         success:function (JSON)          {             if (typeof json = = ' object ')              {     &NB Sp           var oproduct, $row, iheight, itempheight;                  for (Var i=0, l=json.length; i<l; i++)                  {                     O Product = Json[i];                                           //Find the column with the lowest current height, add new content to the column                      iheight =-1;                      $ (' #stage Li '). each (function () {   & nbsp   &NBSP;                 Itempheight = number ($ (this). Height ());                          if (Iheight==-1 | | iheight>ite Mpheight)                                                       iheight = itempheight;                            $row = $ (this);                         }        &NB Sp            });                                                                  $ite m = $ (' <diV><br/> ' +oproduct.title+ ' </div> '). Hide ();                                            $row. Append ($item);                      $item. FadeIn ();                       &NBSP;&N Bsp      }     });  }

The waterfall flow effect of jquery, scrolling down instantly loading content