Blocksit插件實現(xiàn)瀑布流數(shù)據(jù)無限( 異步)加載

    BlocksIt 瀑布流插件是基于jquery的，使用也非常簡單，是為數(shù)不多的幾款動態(tài)瀑布流插件之一。
    html代碼：
    <div> 
      <div id="kppcl">
        <div>
          <div>
            <div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></a></div>
            <div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>
            <div>
              <table cellspacing="0" cellpadding="0">
                <tr>
                  <th>時    間：</th>
                  <td>{#$item.start_date#}-{#$item.end_date#}</td>
                </tr>
                <tr>
                  <th>地    點：</th>
                  <td>{#$item.area_name#}</td>
                </tr>
              </table>
            </div>
          </div>
          <div></div>
        </div>
        <div>
          <div>
            <div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></a></div>
            <div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>
            <div>
              <table cellspacing="0" cellpadding="0">
                <tr>
                  <th>時    間：</th>
                  <td>{#$item.start_date#}-{#$item.end_date#}</td>
                </tr>
                <tr>
                  <th>地    點：</th>
                  <td>{#$item.area_name#}</td>
                </tr>
              </table>
            </div>
          </div>
          <div></div>
        </div>
        <div>
          <div>
            <div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></a></div>
            <div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>
            <div>
              <table cellspacing="0" cellpadding="0">
                <tr>
                  <th>時    間：</th>
                  <td>{#$item.start_date#}-{#$item.end_date#}</td>
                </tr>
                <tr>
                  <th>地    點：</th>
                  <td>{#$item.area_name#}</td>
                </tr>
              </table>
            </div>
          </div>
          <div></div>
        </div>
      </div>
      <div id="page">
        <div><b>上一頁</b><b>1</b><a href="?p=2">2</a><a href="?p=2" rel="2">下一頁</a></div>
      </div>
    </div>
    js代碼
    <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;
      //滾動
      $(window).scroll(function(){
        // 當滾動到最底部以上100像素時， 加載新內(nèi)容
        if ($(document).height() - $(this).scrollTop() - $(this).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').append(data.html).BlocksIt('reload');
                }
                if(data.pages_str){
                  $('#page').html(data.pages_str);
                }
              }
            }
          });
        }
      }
    </script>