<!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. 真正的inotify+rsync实时同步 彻底告别同步慢

    真正的inotify+rsync实时同步 彻底告别同步慢       http://www.ttlsa.com/web/let-infotify-rsync-fast/     背景 我们公司在用in ...

  2. ssh 私匙登录, 文件rswrst权限

    skill -KILL -u user1  //注销用户 ssh 免密码登录 http://flysnowxf.iteye.com/blog/1567570 (说是防火墙的问题) http://fly ...

  3. Java中的队列：java.util.Queue接口

    队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作. Queue接口与List.Set同一级别,都是继承了Collection接口.Linked ...

  4. JS的IE和FF兼容性问题汇总

    转自:蓝色理想 以下以 IE 代替 Internet Explorer,以 MF 代替 Mozilla FF 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: var ...

  5. css圆角 四边投影

    -moz-border-radius: 30px;-webkit-border-radius: 30px; border-radius:30px; -webkit-box-shadow:0 0 10p ...

  6. linux笔记1

    在root下创建用户 1.useradd  abc  //添加一个新用户 2. cat  /etc/passwd   //查看新用户是否存在 3.passwd    abc 输入密码 (123456) ...

  7. Security log is full,only administrator can log on to fix the problem(安全日志满了)

    When you login the system and see this error  “Security log on this system is full,only administrato ...

  8. 【转】C#路径/文件/目录/I/O常见操作汇总

    文件操作是程序中非常基础和重要的内容,而路径.文件.目录以及I/O都是在进行文件操作时的常见主题,这里想把这些常见的问题作个总结,对于每个问题,尽量提供一些解决方案,即使没有你想要的答案,也希望能提供 ...

  9. ajax的post用法

    <button>点击之后,显示ajax返回的数据</button> 首先在页面上新建了一个按钮,点击这个按钮后,执行ajax操作,并将返回的字符串显示在按钮上. 下面是ajax ...

  10. http://phantomjs.org/page-automation.html

    http://phantomjs.org/page-automation.html install brew curl -LsSf http://github.com/mxcl/homebrew/ta ...