<!DOCTYPE=html>

<html>

<head>

< script src="js/jquery.js" type="text/javascript"></ script>

   < script type="text/javascript">

    $(document).ready(function(){

        var range = 50;             //距下边界长度/单位px

        var elemt = 500;           //插入元素高度/单位px

        var maxnum = 20;            //设置加载最多次数

        var num = 1;

        var totalheight = 0;

        var main = $("#content");                     //主体元素

        $(window).scroll(function(){

            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)

            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());

            //console.log("页面的文档高度 ："+$(document).height());

            //console.log('浏览器的高度：'+$(window).height());

            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);

    		if(($(document).height()-range) <= totalheight  && num != maxnum) {

                main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");

                num++;

            }

        });

    });

    </ script>

</head>

<body>

    <div id="content" style="height:960px">

        <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>

		<div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>

    </div>

</body>

</html>

　　

页面滚动动态加载数据，页面下拉自动加载内容 jquery的更多相关文章

  1. Jquery页面滚动动态加载数据，页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  2. wap 往下拉自动加载更多数据

    var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloa ...

  3. 分页插件思想：pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  4. 滚动到底部加载更多及下拉刷新listview的使用

    最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...

  5. YCRefreshView-自定义支持上拉加载更多，下拉刷新。。。

    自定义支持上拉加载更多,下拉刷新,支持自由切换状态[加载中,加载成功,加载失败,没网络等状态]的控件,拓展功能[支持长按拖拽,侧滑删除]可以选择性添加 .具体使用方法,可以直接参考demo. 轻量级侧 ...

  6. ListView下拉刷新，上拉自动加载更多

    下拉刷新,Android中非常普遍的功能.为了方便便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能.设计最初是参考开源中国的Android客户端源码.先看示例图.       ...

  7. Android UI--自定义ListView(实现下拉刷新+加载更多）

    Android UI--自定义ListView(实现下拉刷新+加载更多) 关于实现ListView下拉刷新和加载更多的实现,我想网上一搜就一堆.不过我就没发现比较实用的,要不就是实现起来太复杂,要不就 ...

  8. Android打造(ListView、GridView等)通用的下拉刷新、上拉自动加载的组件

    原文 http://blog.csdn.net/bboyfeiyu/article/details/39253051       前言 下 拉刷新组件在开发中使用率是非常高的,基本上联网的APP都会采 ...

  9. Android中自定义ListView实现上拉加载更多和下拉刷新

    ListView是Android中一个功能强大而且很常用的控件,在很多App中都有ListView的下拉刷新数据和上拉加载更多这个功能.这里我就简单记录一下实现过程. 实现这个功能的方法不止一个,Gi ...

随机推荐

  1. WF 快速入门

    WF(Windows Workflow Foundation ,中文译为:Windows工作流基础)是一种基于更高级抽象概念的编程语言,适合于实现业务流程.虽然可以通过使用图形化的工具(Workflo ...

  2. HTML邮件制作规范

    以下内容有些是别人总结的,有些是自己在工作中总结的. 模板最佳尺寸:显示宽度550px-750px,模板高度控制在一屏以内. 1. 用table+css方式构建模板 Div+css布局不完全被邮件客户 ...

  3. 使用node.js抓取有路网图书信息（原创）

    之前写过使用python抓取有路网图书信息,见http://www.cnblogs.com/dyf6372/p/3529703.html. 最近想学习一下Node.js,所以想试试手,比较一下http ...

  4. php学习日志（2）-php变量

    变量是用于存储数据的容器,与代数相似,可以给变量赋予某个确定的值(例如:$x=3)或者是赋予其它的变量(例如:$x=$y+$z).变量的定义主要有以下规则: 变量以$开始,后面跟着变量的名称: 变量名 ...

  5. php array_walk 和 array_reduce函数

    1.array_walk:将数组中的元素(键+值)依次取出传给处理的函数,函数处理完就完了,没有返回值. $arr1=array( 'name'=>'zhangsan', 'age'=>3 ...

  6. 64位Python安装PIL

    写个小程序需要安装PIL,但是官网只有32位,无法找到64位安装路径.根据网上教程自行编译,但是由于VS版本问题总是提示“Python error: Unable to find vcvarsall. ...

  7. javac mac 终端乱码

    java和javac在简体中文的Mac OSX的终端(Terminal.app)环境下,默认是以GBK编码的中文输出各种诸如语法错误,数组访问越界之类的信息.但是,Mac的终端的默认编码是UTF-8, ...

  8. 【原创】一起学C++ 之->(箭头符号) ---------C++ primer plus(第6版)

    1.C++新手在指定结构成员时,不知道何时用.运算符,何时是用->运算符. 结论:如果结构标识符是结构名,则使用句点运算符:如果标识符是指向结构的指针,则使用箭头运算符. #include &l ...

  9. Oracle的Import用法

    1. imp 命令介绍   imp 命令可以通过输入各种参数来控制导出方式:  imp keyword=value 或 keyword=(value1,value2,...,valueN) ,例如 i ...

  10. UIImagePickerController拍照与摄像(转)

    转载自:http://blog.sina.com.cn/s/blog_68edaff101019ppe.html (2012-11-23 14:38:40) 标签: ios iphone 拍照 摄像 ...