时间:2014-01-29 发布人:SHX 浏览次数:2124 评论:0
经常看见所有的数据都在一个一页,当滚动快到底部的时候就会有新的东西加载出来,配合当前的瀑布流的布局设计是非常完美的。现在我们来看看他的原理吧
我们采取JQ的方式,所有先要引入JQ
然后写入HTML页面html>
Scrollbody{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#loading{display:none; font-weight:bold; color:#FF0000;}
p{padding:10px;}
for($i=0;$i<=20;$i++){echo'
TEST Paragraph
';}//这里为了方便,用了PHP循环输出数据
?>
loading data...
页面写好后,我们写入javascript
$(document).ready(function() {
$(window).scroll(loadData);
});
此处,当滚动条滚动时,就执行loadData函数,下面在写loadDatavar counter = 0;
function loadData()
{
if(counter
{
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'
19
?>
这样就完成了无限加载。