Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
Posted luziluck
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery鼠标滚动到页面底部自动加载更多内容,使用分页相关的知识，希望对你有一定的参考价值。
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鼠标滚动到页面底部自动加载更多内容,使用分页的主要内容，如果未能解决你的问题，请参考以下文章
滚动到页面底部 100px 时，jQuery 加载内容，触发多个事件