Blocksit Plug-ins to achieve the waterfall Stream data Unlimited (asynchronous) Loading _ image effects

HTML code:

<div style= "width:1000px; Overflow:hidden; margin:0 Auto "> <div class=" KPPCL "style=" WIDTH:1008PX; Position:relative "id=" KPPCL "> <div class=" kppcld "> <div class=" kppcld_t "> <div clas s= "Kpic" ><a href= ' {#url_reset ("Activity/detail", "id_{# $item. id#}") #} ' ></a></div> <div class= "kname" ><a href= ' {#url_reset ("Activity/detail", "id_{# $item. id#} ") #} ' >{# $item .title#}</a></div> <div class= ' kinfor ' > <table width= ' 100% ' Der= "0" cellspacing= "0" cellpadding= "0" > <tr> <th>      Room:< /th> <td>{# $item. start_date#}-{# $item .end_date#}</td> </tr> ;tr> <th>      dot:</th> <td>{# $item. area_name#}</td&
            Gt </tr> </table> </div> </div> <div class= "kppcld_b" ></div> </div> & Lt;div class= "KPPCLD" > <div class= "kppcld_t" > <div class= "kpic" ><a href= ' {#url_reset ("Acti  Vity/detail "," id_{# $item. id#} ") #} ' ></a></div> class= "Kname" ><a href= ' {#url_reset ("Activity/detail", "id_{# $item. id#}") #} ' >{# $item .title#}</a> </div> <div class= "kinfor" > <table width= "100%" border= "0" cellspacing= "0" cellpadding= "0 "> <tr> <th>     :</th> <td>{# $ite m.start_date#}-{# $item .end_date#}</td> </tr> <tr> <th> &nbsp
          ;    Point:</th> <td>{# $item .area_name#}</td> </tr>
</table> </div>      </div> <div class= "kppcld_b" ></div> </div> <div class= "KPPCLD" > <div class= "kppcld_t" > <div class= "kpic" ><a href= ' {#url_reset ("Activity/detail", "id_{# $item. id#}") # } ' ></a></div> <div ' class= kname ' ><a href= ' {# Url_reset ("Activity/detail", "id_{# $item. id#}") #} ' >{# $item .title#}</a></div> <div class= ' kinfor
              "> <table width=" 100% "border=" 0 "cellspacing=" 0 "cellpadding=" 0 "> <tr> <th>     :</th> <td>{# $item start_date#}-{# $item. END_DATE#}&LT;/TD&G
            T </tr> <tr> <th>      Point:</th> <td>
      {# $item .area_name#}</td> </tr> </table> </div> </div> <div class= "Kppcld_b" ></div> </div> </div> <div id= "page" style= "Display:none" > &L T;div class= "pages" ><b class= "Page_icon" > Prev </b><b>1</b><a href= "? p=2" >2</a ><a href= "? p=2" class= "Nextprev" rel= "2" > next page </a></div> </div> </div>

JS Code

<script src= "/js/blocksit.min.js" ></script> <script language= "javascript" type= "Text/javascript" > $ (window). Load (function () {$ (' #kppcl ').
  Blocksit ({numofcol:3, offsetx:5, offsety:5});
 
  });
  var current_p = 0; Scroll $ (window). Scroll (function () {//when scrolling to the bottom 100 pixel, load new content if ($ (document). Height ()-$ (this). ScrollTop ()-$ (t
    His). Height () <100) {ajax_load_data ();
  }
  });
    function Ajax_load_data () {var next_p = $ (' #page '). Find ('. Nextprev '). attr (' rel ');
      if (next_p && next_p!= current_p) {console.log (' nextpage = ' +next_p);
 
      Current_p = next_p;
        $.ajax ({url: ' {#url_reset ("Request/front/ajax", "", "PHP") #} ', data:{' act ': ' Ajax_forum ', ' P ': next_p},
        DataType: ' JSON ', type: ' Post ', beforesend:function () {show_loading_body ();
        }, Complete:function () {show_loading_body ();
   }, Success:function (data) {       if (data.status!= undefined && data.status = = ' OK ') {if (data.html) {$ (' #kppcl '). A Ppend (data.html).
            Blocksit (' reload ');
            } if (DATA.PAGES_STR) {$ (' #page '). HTML (DATA.PAGES_STR);
    }
          }
        }
      }); }} </script>