php 无限滚动加载,滚动到底无限加载的原理

时间：2014-01-29  发布人：SHX  浏览次数：2124  评论：0

经常看见所有的数据都在一个一页，当滚动快到底部的时候就会有新的东西加载出来，配合当前的瀑布流的布局设计是非常完美的。现在我们来看看他的原理吧

我们采取JQ的方式，所有先要引入JQ

然后写入HTML页面html>

Scroll

body{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

';}

?>

这样就完成了无限加载。