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 相关文章推荐
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
vue实现在线翻译功能
Sep 27 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
Node.js API详解之 readline模块用法详解
May 22 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
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
iView框架问题整理小结
2018/10/16 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
js实现随机点名程序
2020/09/17 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
利用aardio给python编写图形界面
2017/08/21 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
PHP笔试题
2012/02/22 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
大家检讨书5000字
2014/02/03 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
本科生就业推荐信
2014/05/19 职场文书
班主任先进事迹材料
2014/12/17 职场文书