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


Posted in Javascript onJune 20, 2014

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>
Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 #Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 #Javascript
Node.js实现简单聊天服务器
Jun 20 #Javascript
SuperSlide2实现图片滚动特效
Jun 20 #Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 #Javascript
js常用数组操作方法简明总结
Jun 20 #Javascript
JS实现闪动的title消息提醒效果
Jun 20 #Javascript
You might like
投票管理程序
2006/10/09 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php中上传文件的的解决方案
2018/09/25 PHP
jQuery登陆判断简单实现代码
2013/04/21 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
js变量提升深入理解
2016/09/16 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
js+css3实现简单时钟特效
2020/09/13 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
python super函数使用方法详解
2020/02/14 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python如何使用代码运行助手
2020/07/03 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
民事答辩状范本
2015/05/21 职场文书
学校运动会简讯
2015/07/20 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
教师培训学习心得体会
2016/01/21 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS