html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

Blocksit插件实现瀑布流数据无限( 异步)加载_图象特效_

[ ] 已经帮助:人解决问题

html代码:7JqHTML5中文学习网 - HTML5先行者学习网

<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>

7JqHTML5中文学习网 - HTML5先行者学习网

7JqHTML5中文学习网 - HTML5先行者学习网

js代码7JqHTML5中文学习网 - HTML5先行者学习网

<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>

7JqHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助