滚动到底无限加载的原理

时间:2014-01-29  发布人:SHX  浏览次数:2875  评论: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>&nbsp;</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常用函数

我要评论

    loading
 

关闭

loading

回顶部