异步加载技术实现当滚动条到最底部的瀑布流效果


Posted in PHP onSeptember 16, 2014

异步加载技术实现瀑布流效果。当滚动条到最底部的时候触发一个事件,这个事件写入$.get()事件,向内部程序页传递类别id和页码,程序将会返回那个类别下的相对页的产品列表,如果程序查询当前类无产品即返回空。

滚动条事件要写在window.onscroll中才有效判断。如下:

window.onscroll=function(){<br>
// var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var tops = $(document).scrollTop(); //获取滚动条的位置
var sctop = $(document).height()-$(window).height();
var id = $("#ajax_claid").val();
if(!id){
id=8;
}
$("#ajax_p").val(tops);
if(tops>=sctop)//成立说明滚动条已在最底部
{
var b=$("#ajax_p").val();
if(b>a){
page=page+1;//传递页码
}
var Url = "aja_pro/"+id+"/"+page;//程序页面,查询信息返回数据,直接返回带html的信息。

$.get(Url,function(data){
$("#aja_jia").append(data);
});

}
};
PHP 相关文章推荐
php 常用类整理
Dec 23 PHP
PHP对象相互引用的内存溢出实例分析
Aug 28 PHP
PHP闭包实例解析
Sep 08 PHP
thinkphp模板用法和内容输出实例
Nov 28 PHP
分享下php5类中三种数据类型的区别
Jan 26 PHP
四种php中webservice实现的简单架构方法及实例
Feb 03 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
Apr 11 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
May 20 PHP
PHP实现正则表达式分组捕获操作示例
Feb 03 PHP
PHP中PCRE正则解析代码详解
Apr 26 PHP
详解no input file specified 三种解决方法
Nov 29 PHP
TP5框架实现上传多张图片的方法分析
Mar 29 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
Sep 16 #PHP
PHP使用静态方法的几个注意事项
Sep 16 #PHP
PHP处理JSON字符串key缺少双引号的解决方法
Sep 16 #PHP
php中使用PHPExcel读写excel(xls)文件的方法
Sep 15 #PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
Sep 12 #PHP
php修改指定文件后缀的方法
Sep 11 #PHP
MyEclipse常用配置图文教程
Sep 11 #PHP
You might like
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
Python 第一步 hello world
2009/09/25 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
有关爱国演讲稿
2014/05/07 职场文书
付款委托书范本
2014/10/05 职场文书
毕业生个人自荐书
2015/03/05 职场文书