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 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
关于JS解构的5种有趣用法
Sep 05 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
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python选课系统开发程序
2016/09/02 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
python中open函数的基本用法示例
2019/09/07 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
市场营销求职信范文
2014/02/21 职场文书
团日活动总结书
2014/05/08 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
商超业务员岗位职责
2015/02/13 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
小学中队活动总结
2015/05/11 职场文书
对公司的意见和建议
2015/06/04 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
Java死锁的排查
2022/05/11 Java/Android