<!DOCTYPE=html>  
    <html>  
    <head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="./jquery-1.8.2.min.js" type="text/javascript"></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:800px' >hello world test DIV
        </div>  
    </div>  
    </body>  
    </html>

<script type="text/javascript">
        $(function(){
            // alert($(document).height());
            var range = 50; //距下边界长度/单位px  
            var elemt = 500; //插入元素高度/单位px  
            var maxnum = 20; //设置加载最多次数  
            var num = 1;  
            var totalheight = 0;  
            var main = $("#content"); //主体元素  
            $(window).scroll(function(){  
                alert( $(window).height() );
            var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)  
            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
            //console.log("页面的文档高度 ："+$(document).height());  
            //console.log('浏览器的高度：'+$(window).height());
            // alert(srollPos);
            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>

瀑布流下滑 发送ajax的更多相关文章

  1. 服务器代理+jQuery.ajax实现图片瀑布流

    服务器代理机制破解浏览器的同源策略 瀑布流功能实现分析 具体实现代码及业务实现分析 一.服务器代理机制破解浏览器同源策略 由于浏览器的同源策略无法请求不同域名下的资源,但是服务器的后台程序并不受同源策 ...

  2. AJAX异步实现简单的瀑布流

    传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...

  3. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

    瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...

  4. Masonry + Ajax 实现无限刷新瀑布流

    效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...

  5. [妙味Ajax]第二课：实例：留言板、瀑布流

    知识点总结 瀑布流原理(固定布局) 总宽度大小固定 每列宽度固定,比如LI,高度自动计算,每列使用float:left来布局 计算最短的一列,将Div插到最短的一列处(li里面包div)(getSho ...

  6. 瀑布流原生ajax，demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释 img:ajax.php:demo.php 其中img中放入图片 1.jpg: ...

  7. 原生ajax瀑布流demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...

  8. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  9. Ajax——瀑布流

    基本概念 1.宽度是一致的,高度上参差不齐 2.新增内容优先放置在最矮的地方 核心难点 1.用一个数组存储每列的高度值 2.新值添加到值最小索引上,每次替换更新数组 插件使用 1.$.fn.exten ...

随机推荐

  1. Python 一行代码实现并行

    需求 给定一个list   针对list 中每个元素执行一定的操作(这个操作很费时间,例如爬数据的时候调用某个网站的接口),返回操作后的list 例如 给定 1-10个数,在每个数字后面加个字母a 方 ...

  2. hadoop单击模式环境搭建

    一 安装jdk 下载相应版本的jdk安装到相应目录,我的安装目录是/usr/lib/jdk1.8.0_40 下载完成后,在/etc/profile中设置一下环境变量,在文件最后追加如下内容 expor ...

  3. python步长为负时的情况

    Sequence[start:end:step] python 的序列切片中,第一个:隔离了 起始索引 和 结束索引,第二个:隔离了 结束索引和 步长 step为正,则从左到右切片,如果 start ...

  4. 《Python学习手册》（二）

    <Python学习手册>(二) --类型和运算 数字 十六进制 八进制 二进制 0x 0o 0b hex() oct() bin() >>>int('10',2) 2 & ...

  5. tomcat官方下载连接——安装版&绿色版

    Tomcat绿色版Windows64位9.0.10 http://mirror.bit.edu.cn/apache/tomcat/tomcat-9/v9.0.10/bin/apache-tomcat- ...

  6. StrStr,判断一个字符串是不是另一个字符串的字串，并返回子串的位置

    public int strStr(String haystack, String needle) { if(haystack == null || needle == null) { return ...

  7. 画龙点睛 之RabbitMQ 初来乍到

    消息队列解决了什么问题 1. 异步处理 2. 应用解耦 3. 流量削峰 4. 日志处理...... 安装RabbitMQ (这里的安装我只仅仅说一下linux 的安装 如果想安装windows 版 可 ...

  8. NumPy数据类型

    NumPy - 数据类型 NumPy 支持比 Python 更多种类的数值类型. 下表显示了 NumPy 中定义的不同标量数据类型. 序号 数据类型及描述 1. bool_存储为一个字节的布尔值(真或 ...

  9. java对象的深浅clone

    在Java语言中,数据类型分为值类型(基本数据类型)和引用类型,值类型包括int.double.byte.boolean.char等简单数据类型,引用类型包括类.接口.数组等复杂类型. 浅克隆和深克隆 ...

  10. const对象 不能调用非const修饰的成员函数

    class class UIRect:public RECT { public: UIRect(LONG leftT = 0, LONG topT = 0, LONG rightT = 0, LONG ...