无限滚动页面

<html>
<head><title>Endless scroll</title>
<style type="text/css">
body{font-famiy:"Trebuchet MS",verdana,arial;}
#loading{display:none;font-weight:bold;color:#FF0000;}
p{padding:10px;}
</style>

</head>
<body>
<div id="container">
<p>Test paragraphp 1</p>
<p>Test paragraphp 2</p>
<p>Test paragraphp 3</p>
<p>Test paragraphp4</p>
<p>Test paragraphp 5</p>
<p>Test paragraphp 6</p>
<p>Test paragraphp 7</p>
<p>Test paragraphp 8</p>
<p>Test paragraphp 9</p>
<p>Test paragraphp 10</p>
<p>Test paragraphp 11</p>
<p>Test paragraphp 12</p>
<p>Test paragraphp 13</p>
<p>Test paragraphp 14</p>
<p>Test paragraphp 15</p>
<p>Test paragraphp 16</p>
<p>Test paragraphp 17</p>
<p>Test paragraphp 18</p>
<p>Test paragraphp 19</p>
<p>Test paragraphp 20</p>


</div>
<span id="lb" style="top:100px;left:100px;position:fixed;"></span>
<p id="loading">loading data..</p>
<p>&nbsp;</p>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script>

$(document).ready(function(){
     $(window).scroll(loadData);
    
    
});
var counter=0;
function loadData()
{
     if(counter<5000)
     {
          if(isUserAtBottom())
          {
               getData();
          }
     }
}

function isUserAtBottom(){
     return ((($(document).height()-$(window).height())-$(window).scrollTop())<=50)?true:false;
    
}

function getData()
{
     $(window).unbind('scroll');
     $('#loading').show();
     $.get(
               'data.php',
               {},
               function(response){
                    counter++;
                    $('#loading').hide();
                    $('#container').append(response);
                    $(window).scroll(loadData);
                    }
               );
}
</script>
</body>
</html>
 
2.data.php
 
<?php

echo '<p>This data has been <br/>loaded from server..</p>';
?>
posted @ 2014-03-31 17:32  wint  Views(245)  Comments(0)    收藏  举报