<!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. border-radius导致overflow:hidden失效问题。

    如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug: 一种方法是运用-webkit ...

  2. 粗谈Android中的对齐

    在谈这个之前先啰嗦几个概念. 基线:书写英语单词时为了规范书写会设有四条线,从上至下第三条就是基线.基线对齐主要是为了两个控件中显示的英文单词的基线对齐,如下所示: Start:在看API的时候经常会 ...

  3. wampsever在win10中安装扩展掉坑

    1.必须要退出wampserver 2.php pecl + 3.wampserver 64 3.0.6

  4. 破解网络投票IP限制、验证码限制、COokie限制、Seesion限制的方法!（转）

    顾名思义,网络投票就是在网络上进行的投票活动,但和其他类型的投票不同的是:网络投票是建立在网络投票系统上的,而结果完全由程序输出,无需人工参与.这既是网络投票系统的优点也是其缺点,没有了人工的参与,其 ...

  5. makefile:4: *** missing separator. Stop.

    今天在编写蜂鸣器的驱动程序时,makefile文件是这样: CROSS=arm-linux- all: beep beep: beep.c $(CROSS)gcc -o beep beep.c $(C ...

  6. Demo学习： Cookies Demo

    Cookies Demo 浏览器Cookies的读写,最常用的就是记录用户的登录信息,在项目里做登录界面时也用到了Cookies功能. procedure TMainForm.UniButton2Cl ...

  7. UVA 11722

    You are going from Dhaka to Chittagong by train and you came to know one of your old friends is goin ...

  8. JavaScript技巧45招

    原文:45 Useful JavaScript Tips, Tricks and Best Practices作者:Saad Mousliki 在这篇文章里,我将分享一些JavaScript的技巧.秘 ...

  9. 数据库 mysql 优化器原理

    MySQL查询优化器有几个目标,但是其中最主要的目标是尽可能地使用索引,并且使用最严格的索引来消除尽可能多的数据行. 你的最终目标是提交SELECT语句查找数据行,而不是排除数据行.优化器试图排除数据 ...

  10. php+mysql分页类的入门实例

    php+mysql分页类的简单代码 时间:2016-02-25 06:16:26来源:网络 导读:php+mysql分页类的简单代码,二个php分页类代码,对商品进行分页展示,当前页面数,每个页面展示 ...