• 迎丰收 晒丰收 庆丰收 2018-10-15
  • “捂脸表情”被注册成商标?申请人不认为商标侵权 2018-10-15
  • 战巡南海、绕岛巡航…空军有“飞出去”的主心骨 2018-10-14
  • 幼儿园要求家长写一万字读后感:不能这样玩家长|幼儿园|家长-教育时讯 2018-10-13
  • 中国故宫文物展在希腊举行 2018-10-13
  • 車·晓 第26期 車企官方降价真相幾何? 2018-10-12
  • 宝沃总裁杨嵩:曾和奔驰宝马同水平 已不能同日而语 2018-10-11
  • 新时代党员干部要有更大的担当和作为 2018-10-10
  • “2018-雷霆”专项行动破获百余起台湾间谍案 2018-10-09
  • 朝韩首脑今起在平壤会晤 “金文会”将聚焦三大议题 2018-10-09
  • 2018顺义啤酒节--北京频道--人民网 2018-10-08
  • 台湾遭遇的“断交潮”有无化解之道? 2018-10-08
  • 习近平会见爱沙尼亚总统卡柳莱德 2018-10-08
  • 中国空间站研制建设正有序开展 坚持和平利用 2018-10-07
  • Idlib to further divide Ankara and Moscow 2018-10-06
  • jquery实现随滚动条滚动而加载数据的功能

    栏目: 编程语言 发布于: 2014-05-05 09:09:33

    jquery实现随滚动条滚动而加载数据的功能,目前比较流行的瀑布流就是这种实现形式,具体代码以及使用方法如下:

    <html> 
    <head runat="server"> 
    <title>拉动滚动条加载数据</title> 
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(function () { 
    var i = 4;$(window).bind("scroll", function (event) 
    { 
    //滚动条到网页头部的 高度,兼容ie,ff,chrome 
    var top = document.documentElement.scrollTop + document.body.scrollTop; 
    //网页的高度 
    var textheight = $(document).height(); 
    // 网页高度-top-当前窗口高度 
    if (textheight - top - $(window).height() <= 100) { if (i >= 100) { return; 
    //控制最大只能加载到100 
    } 
    $('#div1').css("height", $(document).height() + 100);i++; 
    //可以根据实际情况,获取动态数据加载 到 div1中 
    $('<div>' + i + '</div>').appendTo($('#div1')); 
    } 
    }); 
    }) 
    </script> 
    <style> 
    #div1 div 
    { 
    font-size: 100px; 
    background: #ccc; 
    margin-top: 5px; 
    } 
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
    <div style="height: 1000px;" id="div1"> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    </div> 
    </form> 
    </body> 
    </html>

    您可能感兴趣的文章

    • 随滚动条滑动而滑动的DIV层(固定在网页顶部不随浏览滚动而消失的DIV层)
    • 大流量网站该如何实现优化服务器、静态化、数据库优化、负载均衡以实现高负载
    • JS判断滚动条是否停止滚动,兼容IE和火狐浏览器
    • js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
    • 页面应该如何加载javascript才能提高网站性能
    • jquery 实现全选,反选,全不选等功能
    • mysql服务器主从数据库同步配置
    • JavaScript和Jquery动态加载Js文件和Css文件
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:jquery实现随滚动条滚动而加载数据的功能
    IT技术书籍推荐:
    细说PHP(精要版)
    细说PHP(精要版)
    高洛峰 (作者), LAMP兄弟连 (编者)
    PHP是开发Web应用系统最理想的工具,拥有易于使用、功能强大、成本低廉、安全性高、开发速度快且执行灵活等优点?!断杆礟HP(第2版)》自出版以来,销售一路在同类书籍中领先,已成为PHP学习者首选的工具书。为了可以让读者携带方便及更精准地掌握PHP的重点、要点,同时能使之作为大学计算机系PHP教材普及,特别推出《细说PHP精要版》。本书是以《细说PHP(第2版)》为基础,提取出精华内容,都是PHP开发中必须需要掌握的技术点。全书以实用为目标设计,包含PHP开发中必备的各项技术,对已列出的每一个知识点都进行了深入详细的讲解,并附有大量的经典实例代码,图文并茂,并且侧重介绍了PHP的相关技术在实际Web开发中的应用。