zoukankan      html  css  js  c++  java
  • jQuery实现当拉动滚动条到底部加载数据

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery实现当拉动滚动条到底部加载数据</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
    var totalheight = 0;//定义一个总的高度变量
    $(window).scroll(function () {
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());//浏览器的高度加上滚动条的高度
    if ($(document).height() <= totalheight) //当文档的高度小于或者等于总的高度的时候,开始动态加载数据
    {
    //加载数据
    $("#container").append("我是新加载出来的数据<br/>我是新加载出来的数据<br/>我是新加载出来的数据<br/>我是新加载出来的数据<br/>我是新加载出来的数据<br/>我是新加载出来的数据<br/>");
    }
    });
    </script>
    </head>
    <body>
    <div id="container">
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    </div>
    </body>
    </html>

  • 相关阅读:
    分布式存储
    存储知识学习
    洛谷 P1003 铺地毯 (C/C++, JAVA)
    多线程面试题系列3_生产者消费者模式的两种实现方法
    多线程面试题系列2_监视线程的简单实现
    多线程面试题系列1_数组多线程分解
    《深度学习》阅读笔记1
    素数在两种常见情况下的标准最优算法
    dfs与dp算法之关系与经典入门例题
    百度之星资格赛2018B题-子串查询
  • 原文地址:https://www.cnblogs.com/zhoumingxiu/p/4564665.html
Copyright © 2011-2022 走看看