Refresh dynamically loads data scroll bars to load pages suitable for comments

Scroll screen to load more data, suitable for comments and other pages

The database in this example is simple and clear at first glance.
 
Copy codeThe Code is as follows:
<Div id = "container">

<? Php
$ Query = mysql_query ("select * from content order by id desc limit 0, 10 ");
While ($ row = mysql_fetch_array ($ query )){
?>
<Div class = "single_item">
<Div class = "element_head">
<Div class = "date"> <? Php echo date ('m-d H: I ', strtotime ($ row ['updatetime']);?> </Div>
<Div class = "author"> <? Php echo $ row ['id'];?> </Div>
</Div>
<Div class = "content"> <? Php echo $ row ['message'];?> </Div>
</Div>
<? Php }?>
</Div>
<Div class = "nodata"> </div>

Js files
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
Var winH = $ (window). height (); // The height of the visible area of the page
Var I = 1;
$ (Window). scroll (function (){
Var pageH = $ (document. body). height ();
Var scrollT = $ (window). scrollTop (); // top of the scroll bar
Var aa = (pageH-winH-scrollT)/winH;
If (aa <0.02 ){
$. GetJSON ("result. php", {page: I}, function (json ){
If (json ){
Var str = "";
$. Each (json, function (index, array ){
Var str = "<div class = \" single_item \ "> <div class = \" element_head \ "> ";
Var str = str + "<div class = \" date \ ">" + array ['date'] + "</div> ";
Var str = str + "<div class = \" author \ ">" + array ['author'] + "</div> ";
Var str = str + "</div> <div class = \" content \ ">" + array ['content'] + "</div> ";
$ ("# Container"). append (str );
});
I ++;
} Else {
$ (". Nodata" ).show().html ("Don't scroll, it's already done... ");
Return false;
}
});
}
});
});
</Script>

Result. php
Copy codeThe Code is as follows:
<? Php
Include ("conn. php ");

$ Page = intval ($ _ GET ['page']); // gets the requested page number.
$ Start = $ page * 5;
$ Query = mysql_query ("select * from content order by id desc limit $ start, 5 ");
While ($ row = mysql_fetch_array ($ query )){
$ Arr [] = array (
'Content' => $ row ['message'],
'Author' => $ row ['id'],
'Date' => date ('m-d H: I ', strtotime ($ row ['updatetime'])
);
}
Echo json_encode ($ arr); // convert to json data output
?>