Blocksit插件实现瀑布流数据无限( 异步)加载

html代码：

<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 class="kpic"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></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#}</td>
            </tr>
            <tr>
              <th>地    点：</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#}")#}'><img src="{#$item.logo#}" width="322" /></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#}</td>
            </tr>
            <tr>
              <th>地    点：</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#}")#}'><img src="{#$item.logo#}" width="322" /></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#}</td>
            </tr>
            <tr>
              <th>地    点：</th>
              <td>{#$item.area_name#}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="kppcld_b"></div>
    </div>
 
  </div>
 
  <div id="page" style="display: none">
    <div class="pages"><b class="page_icon">上一页</b><b>1</b><a href="?p=2">2</a><a href="?p=2" class="nextprev" 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像素时， 加载新内容
    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>

您可能感兴趣的文章:

• EASYUI TREEGRID异步加载数据实现方法
• struts2+jquery+json实现异步加载数据(自写)
• 浏览器窗口滚动加载数据采用异步形式从后台加载数据
• asp.net 使用js分页实现异步加载数据
• 自写的jQuery异步加载数据添加事件
• jQuery异步加载数据并添加事件示例
• 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)