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

Posted 2021-02-28 smedas

1.index.php 

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