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 相关文章推荐
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
深入了解JavaScript 私有化
May 30 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 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基础知识:类与对象(5) static
2006/12/13 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
jQuery使用each遍历循环的方法
2018/09/19 jQuery
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
使用graphics.py实现2048小游戏
2015/03/10 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
python执行使用shell命令方法分享
2017/11/08 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
python绘图模块之利用turtle画图
2021/02/12 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
中专毕业生自荐信
2013/11/16 职场文书
超市营业员岗位职责
2013/12/20 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
python实现剪贴板的操作
2021/07/01 Python
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python