滚动到底无限加载的原理
时间：2014-01-29 发布人：SHX 浏览次数：2957 评论：0
经常看见所有的数据都在一个一页，当滚动快到底部的时候就会有新的东西加载出来，配合当前的瀑布流的布局设计是非常完美的。现在我们来看看他的原理吧
我们采取JQ的方式，所有先要引入JQ
<script type="text/javascript" src="jquery.js"></script>
然后写入HTML页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll</title>
<style type="text/css">
body{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#loading{display:none; font-weight:bold; color:#FF0000;}
p{padding:10px;}
</style>
</head>
<body>
<div id="container">
<?php
for($i=0;$i<=20;$i++){echo'<p>TEST Paragraph</p>';}
//这里为了方便，用了PHP循环输出数据
?>
</div>
<p id="loading">loading data...</p>
<p> </p>
</body>
</html>页面写好后，我们写入javascript
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(loadData);
});
</script>此处，当滚动条滚动时，就执行loadData函数，下面在写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(data)
{
counter++;
$('#loading').hide();
$('#container').append(data);
$(window).scroll(loadData);
});
}下面我们在写data.php数据页面
<?php
sleep(2);//为了体现效果，这里延时2秒
for($i=0;$i<10;$i++){
echo'<div class="cell">
<img src="http://cued.xunlei.com/demos/publ/img/P_019.jpg" /><p>19</p>
</div>';}
?>这样就完成了无限加载。
上一篇：PHP在线ZIP解压程序下一篇：PHP常用函数
