https://www.cnblogs.com/qhorse/p/4717726.html
index.php代码
[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ?
<html xmlns="http://www.w3.org/1999/xhtml"> ?
???<head> ?
???????<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ?
???????<title>滚屏加载--无刷新动态加载数据技术的应用-www.corange.cn</title> ?
???????<style type="text/css"> ?
???????????#container{margin:10px auto;width: 660px; border: 1px solid #999;} ??
???????????.single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;} ?
???????????.author{position: absolute; left: 0px; font-weight:bold; color:#39f} ?
???????????.date{position: absolute; right: 0px; color:#999} ?
???????????.content{line-height:20px; word-break: break-all;} ?
???????????.element_head{width: 100%; position: relative; height: 20px;} ?
???????????.nodata{display:none; height:32px; line-height:32px; text-align:center; color:#999; font-size:14px} ?
???????</style> ?
???????<script type="text/javascript" src="../jquery.js"></script> ?
???????<script type="text/javascript"> ?
???????????$(function() { ?
???????????????var winH = $(window).height(); //页面可视区域高度 ?
???????????????var i = 1; ?
???????????????$(window).scroll(function() { ?
???????????????????var pageH = $(document.body).height(); ?
???????????????????var scrollT = $(window).scrollTop(); //滚动条top ?
???????????????????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></div>"; ?
???????????????????????????????????$("#container").append(str); ?
???????????????????????????????}); ?
???????????????????????????????i++; ?
???????????????????????????} else { ?
???????????????????????????????$(".nodata").show().html("别滚动了，已经到底了。。。"); ?
???????????????????????????????return false; ?
???????????????????????????} ?
???????????????????????}); ?
???????????????????} ?
???????????????}); ?
???????????}); ?
???????</script> ?
???</head> ?
???<?php ??
???require_once(‘connect.php‘); ??
???$user = array(‘demo1‘,‘demo2‘,‘demo3‘,‘demo3‘,‘demo4‘); ??
????> ??
???<div id="container"> ??
???????<?php ??
???????$query=mysql_query("select * from comments order by id desc limit 0,15"); ??
???????while ($row=mysql_fetch_array($query)) { ??
????????> ??
???????<div class="single_item"> ??
???????????<div class="element_head"> ??
???????????????<div class="date"><?php echo date(‘m-d H:i‘,$row[‘addtime‘]);?></div> ??
???????????????<div class="author"><?php echo $user[$row[‘userid‘]];?></div> ??
???????????</div> ??
???????????<div class="content"><?php echo $row[‘content‘];?></div> ??
???????</div> ??
???????<?php } ?> ??
???</div> ??
???<div class="nodata"></div> ??
result.php代码
[php] view plaincopy在CODE上查看代码片派生到我的代码片
<?php ?
require_once(‘connect.php‘); //连接数据库 ??
??
$user = array(‘demo1‘,‘demo2‘,‘demo3‘,‘demo3‘,‘demo4‘); ??
$page = intval($_GET[‘page‘]); ?//获取请求的页数 ??
$start = $page*15; ??
$query=mysql_query("select * from comments order by id desc limit $start,15"); ??
while ($row=mysql_fetch_array($query)) { ??
???$arr[] = array( ??
???????‘content‘=>$row[‘content‘], ??
???????‘author‘=>$user[$row[‘userid‘]], ??
???????‘date‘=>date(‘m-d H:i‘,$row[‘addtime‘]) ??
???); ??
} ??
echo json_encode($arr); ?//转换为json数据输出 ??
?> ?
connect.php代码
[php] view plaincopy在CODE上查看代码片派生到我的代码片
<?php ?
$host="localhost"; ?
$db_user="root"; ?
$db_pass=""; ?
$db_name="demo"; ?
$timezone="Asia/Shanghai"; ?
?
$link=mysql_connect($host,$db_user,$db_pass); ?
mysql_select_db($db_name,$link); ?
mysql_query("SET names UTF8"); ?
?>
Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
原文地址：https://www.cnblogs.com/luziluck/p/10095526.html