• 特朗普再与世界"为敌" 多国斥其关于耶路撒冷决定 2018-06-22
  • 严防“两节”期间“四风”反弹 持续保持高压态势 2018-06-22
  • 反转!华南理工大学否认向莱阳14岁神童发送考察函 2018-06-21
  • 中国出版集团公司总裁谭跃委员:唱响新时代的好声音 2018-06-21
  • 新華網評:分享經濟,別演成分享的“獨角戲” 2018-06-20
  • 红薯会越放越甜吗 如何保存红薯最科学? 2018-06-20
  • 猪肉创八年新低部分养殖户巨亏离场 行业加速洗牌 2018-06-19
  • 招商证券:创业板反弹压力逐渐显现 2018-06-19
  • “一拖二快三”足球比分直400余名应届大学毕业生成为部队“准警官” 2018-06-19
  • 男子累计献血20万毫升 获选江苏"最美志愿者" 2018-06-19
  • 欧米茄全新推出新西兰酋长队腕表 2018-06-19
  • 財政部發文要求清理“有照無證”會計師事務所 2018-06-19
  • 八旬老人街头贴纸条求收养 称儿子同意其找人抚养 2018-06-18
  • 全国政协委员许鸿飞:让中国文化走出去 2018-06-18
  • 《谈判官》杨幂曝爱情观金句 演绎独立新女性获赞 2018-06-18
  • 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开发中的应用。