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


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 相关文章推荐
JS实现php的伪分页
May 25 PHP
一步一步学习PHP(5) 类和对象
Feb 16 PHP
PHP isset()与empty()的使用区别详解
Aug 29 PHP
thinkphp验证码显示不出来的解决方法
Mar 29 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
Apr 01 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
Apr 27 PHP
php实现在服务器端调整图片大小的方法
Jun 16 PHP
浅谈php+phpStorm+xdebug配置方法
Sep 17 PHP
PHP使用socket发送HTTP请求的方法
Feb 14 PHP
PHP PDOStatement::getAttribute讲解
Feb 01 PHP
php反射学习之不用new方法实例化类操作示例
Jun 14 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
Mar 27 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
php校验表单检测字段是否为空的方法
2015/03/20 PHP
php简单生成随机数的方法
2015/07/30 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
纯JS实现轮播图
2017/02/22 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
深入了解js原型模式
2019/05/30 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python requests使用socks5的例子
2019/07/25 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
办理护照介绍信
2014/01/16 职场文书
单位授权委托书范本
2014/09/26 职场文书
大学生年度个人总结
2015/02/15 职场文书
学校党支部承诺书
2015/04/30 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js