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

技术  /  管理员 发布于 7年前   112

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='https:/article/{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="https:/article/{#$item.logo#}" width="322" /></a></div>        <div class="kname"><a href='https:/article/{#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='https:/article/{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="https:/article/{#$item.logo#}" width="322" /></a></div>        <div class="kname"><a href='https:/article/{#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='https:/article/{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="https:/article/{#$item.logo#}" width="322" /></a></div>        <div class="kname"><a href='https:/article/{#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="https:/article/?p=2">2</a><a href="https:/article/?p=2" class="nextprev" rel="2">下一页</a></div>  </div> </div>

js代码

<script src="https: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>