Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

最新推荐文章于 2023-05-26 15:51:05 发布

jimlong

最新推荐文章于 2023-05-26 15:51:05 发布

阅读量2.9w

点赞数

分类专栏： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

index.php代码

<!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
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
$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");
?>