jquery+ajax+php创建无限滚动页面
html文件：
<html>
<head>
<title>Endless Scroll</title>
<style type="text/css">
body{ font-family: "Trebuchet MS",verdana,arial;}
#loading{ display:none; font-weight:bold;color:#FF0000;}
p { padding:10px;}
</style>
</head>
<body>
<div id="container">
<p>Test Paragraph 1</p>
<p>Test Paragraph 2</p>
<p>Test Paragraph 3</p>
</div>
<p id="loading">loading data... </p>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(window).scroll(loadData);
});
var counter = 0;
function loadData()
{
if(counter < 5)
{
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>
data.php文件：
<?php sleep(2);
echo '<p>This data has been <br/>loaded from server...</p>';
?>