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

异步加载技术实现瀑布流效果。当滚动条到最底部的时候触发一个事件，这个事件写入$.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);
});

}
};
赞 (0)

相关推荐

  • Blocksit插件实现瀑布流数据无限( 异步)加载

    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

  • thinkPHP实现瀑布流的方法

    本文实例讲述了thinkPHP实现瀑布流的方法.分享给大家供大家参考.具体分析如下: 很多人都想做瀑布流的效果,这里告诉大家官网使用的方法,首先要下载瀑布流的插件jquery.masonry.min.js 地址:http://masonry.desandro.com/index.html里面包含的很多示例. 流程: 1. 页面初始化时,调用插件进行一次排版: 2. 当用户将滚动条拖到底部时,用ajax加载一次数据,并排版显示 3. 重复2,直到无数据 Html代码: 复制代码 代码如下: <!D

  • 一则C#简洁瀑布流代码

    View页面. 复制代码 代码如下: @{        ViewBag.Title = "瀑布流";        Layout = "~/Views/Shared/_Layout.cshtml";    }@section header{    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>         <style type="t

  • ThinkPHP自动完成中使用函数与回调方法实例

    本文实例讲述了ThinkPHP自动完成中使用函数与回调方法.分享给大家供大家参考.具体方法如下: ThinkPHP 自动填充格式如下: 复制代码 代码如下: array(填充字段,填充内容[,填充条件][,附加规则]) 附加规则,可选,包括: string:字符串,表示填充内容为字符串(默认). function:使用函数,表示填充的内容是一个函数返回值. callback:使用方法,表示填充的内容是一个当前 Model 的方法返回值. field:字段,表示填充的内容是一个其他字段的值. Th

  • thinkphp四种url访问方式详解

    本文实例分析了thinkphp的四种url访问方式.分享给大家供大家参考.具体分析如下: 一.什么是MVC thinkphp的MVC模式非常灵活,即使只有三个中和一个也可以运行. M -Model 编写model类 对数据进行操作 V -View  编写html文件,页面呈现 C -Controller 编写类文件(UserAction.class.php) 二.ThinkPHP的MVC特点    (简单了解) 三.ThinkPHP的MVC对应的目录  (简单了解) M 项目目录/应用目录/Li

  • jQuery Masonry瀑布流插件使用详解

    jQuery Masonry瀑布流插件使用详解

    Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域.这种效果可以最小化处理 不同高度的元素在垂直方向的间隙.如下: 在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小. 用法 首先倒入类库,

  • Jquery瀑布流插件使用介绍

    瀑布流布局浅析 浅谈个人在瀑布流网页的实现中遇到的问题和解决方法 折腾:瀑布流布局(基于多栏列表流体布局实现) javascript 瀑布流.各大瀑布流简析与建议 因为自己用jquery比较多,便萌生了把瀑布流做成插件的想法,图片就借用迅雷UED上的那些美图吧. 先看看Demo 把代码放出来吧 复制代码 代码如下: ;(function($){ var //参数 setting={ column_width:204,//列宽 column_className:'waterfall_column'

  • jquery简单瀑布流实现原理及ie8下测试代码

    测试环境:ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

  • 纯js实现瀑布流展现照片(自动适应窗口大小)

    用瀑布流来展现照片再好不过了,下面是瀑布流(每一行的长度等于浏览器窗口的长度)的一种实现方式,也可以用css3实现,很简单,谷歌一下你就知道. 我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了. 然后进入下一个循环插入下一行.公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系: h' * (w / h + y / x) = w w是浏览器窗口的宽度, 则 h' = w / (w / h

  • thinkphp数据查询和遍历数组实例

    本文实例讲述了thinkphp数据查询和遍历数组的方法.分享给大家供大家参考.具体方法如下: 数据库可以使用DSN方法进行配置: 复制代码 代码如下: 'DB_PREFIX'=>'tp_',  //设置表前缀 'DB_DSN'=>'mysql://root:@localhost:3306/thinkphp',//使用DSN方式配置数据库信息 如果两种方式同时存在,以DSN方式为优先,还有一种简单实用模型的方式. M() 等效为 new Model(); 复制代码 代码如下: $m=M('Use

  • thinkphp的URL路由规则与配置实例

    本文实例讲述了thinkphp的URL路由规则与配置方法.分享给大家供大家参考.具体分析如下: 一.URL规则 1.默认是区分大小写的 2.如果我们不想区分大小写可以改配置文件 复制代码 代码如下: 'URL_CASE_INSENSITIVE'=>true,//url不区分大小写 3.如果模块名为 UserGroupAction,那么url找模块就必要要写成 复制代码 代码如下: http://localhost/thinkphp4/index.php/user_group/index 4.如果

  • 一个简单的瀑布流效果(主体形式自写)

    一个简单的瀑布流效果(主体形式自写)

    闲着没事,自己写了个瀑布流,我个人写脚本或者是网页的习惯是:只参考别人的效果,很少参考别人的代码,有时侯我宁愿用审查元素来推断代码,也不愿去看源代码.我不知道这个习惯好不好.虽然中间过程是花了我不少时间,但是我做的东西的每一个细节我都还能记清楚(当然肯定后来会忘),因为是我实现的.下面说正题: 瀑布流的主体即为几个ul标签,新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下. 主体形式如下: 复制代码 代码如下: <div id="main"> <

随机推荐