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

1.index.php

1. 
   
2.         <style type="text/css">  
3.             #container{margin:10px auto;width: 660px; border: 1px solid #999;}   
4.             .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}  
5.             .author{position: absolute; left: 0px; font-weight:bold; color:#39f}  
6.             .date{position: absolute; right: 0px; color:#999}  
7.             .content{line-height:20px; word-break: break-all;}  
8.             .element_head{width: 100%; position: relative; height: 20px;}  
9.             .nodata{display:none; height:32px; line-height:32px; text-align:center; color:#999; font-size:14px}  
10.         </style>  
11.         <script type="text/javascript" src="../jquery.js"></script>  
12.         <script type="text/javascript">  
13.             $(function() {  
14.                 var winH = $(window).height(); //页面可视区域高度  
15.                 var i = 1;  
16.                 $(window).scroll(function() {  
17.                     var pageH = $(document.body).height();  
18.                     var scrollT = $(window).scrollTop(); //滚动条top  
19.                     var aa = (pageH - winH - scrollT) / winH;  
20.                     if (aa < 0.02) {  
21.                         $.getJSON("result.php", {page: i}, function(json) {  
22.                             if (json) {  
23.                                 var str = "";  
24.                                 $.each(json, function(index, array) {  
25.                                     var str = "<div class=\"single_item\"><div class=\"element_head\">";  
26.                                     var str = str + "<div class=\"date\">" + array['date'] + "</div>";  
27.                                     var str = str + "<div class=\"author\">" + array['author'] + "</div>";  
28.                                     var str = str + "</div><div class=\"content\">" + array['content'] + "</div></div>";  
29.                                     $("#container").append(str);  
30.                                 });  
31.                                 i++;  
32.                             } else {  
33.                                 $(".nodata").show().html("别滚动了，已经到底了。。。");  
34.                                 return false;  
35.                             }  
36.                         });  
37.                     }  
38.                 });  
39.             });  
40.         </script>  
41.  
42.     <?php   
43.     require_once('connect.php');   
44.     $user = array('demo1','demo2','demo3','demo3','demo4');   
45.     ?>   
46.     <div id="container">   
47.         <?php   
48.         $query=mysql_query("select * from comments order by id desc limit 0,15");   
49.         while ($row=mysql_fetch_array($query)) {   
50.         ?>   
51.         <div class="single_item">   
52.             <div class="element_head">   
53.                 <div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div>   
54.                 <div class="author"><?php echo $user[$row['userid']];?></div>   
55.             </div>   
56.             <div class="content"><?php echo $row['content'];?></div>   
57.         </div>   
58.         <?php } ?>   
59.     </div>   
60.     <div class="nodata"></div>   

result.php代码

1. <?php  
2. require_once('connect.php'); //连接数据库   
3.    
4. $user = array('demo1','demo2','demo3','demo3','demo4');   
5. $page = intval($_GET['page']);  //获取请求的页数   
6. $start = $page*15;   
7. $query=mysql_query("select * from comments order by id desc limit $start,15");   
8. while ($row=mysql_fetch_array($query)) {   
9.     $arr[] = array(   
10.         'content'=>$row['content'],   
11.         'author'=>$user[$row['userid']],   
12.         'date'=>date('m-d H:i',$row['addtime'])   
13.     );   
14. }   
15. echo json_encode($arr);  //转换为json数据输出   
16. ?>  

connect.php代码

1. <?php  
2. $host="localhost";  
3. $db_user="root";  
4. $db_pass="";  
5. $db_name="demo";  
6. $timezone="Asia/Shanghai";  
7.   
8. $link=mysql_connect($host,$db_user,$db_pass);  
9. mysql_select_db($db_name,$link);  
10. mysql_query("SET names UTF8");  
11. ?>