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

';}

?>

這樣就完成了無限加載。