当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Blocksit插件实现瀑布流数据无限( 异步)加载

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

2019年07月19日  | 移动技术网IT编程  | 我要评论

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>时&nbsp;&nbsp;&nbsp;&nbsp;间：</th>
              <td>{#$item.start_date#}-{#$item.end_date#}</td>
            </tr>
            <tr>
              <th>地&nbsp;&nbsp;&nbsp;&nbsp;点：</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>时&nbsp;&nbsp;&nbsp;&nbsp;间：</th>
              <td>{#$item.start_date#}-{#$item.end_date#}</td>
            </tr>
            <tr>
              <th>地&nbsp;&nbsp;&nbsp;&nbsp;点：</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>时&nbsp;&nbsp;&nbsp;&nbsp;间：</th>
              <td>{#$item.start_date#}-{#$item.end_date#}</td>
            </tr>
            <tr>
              <th>地&nbsp;&nbsp;&nbsp;&nbsp;点：</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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网