jquery根据滚动条动态加载数据

PHP Code

1. <div id="container">
2. <?php
3. $query=mysql_query("select * from content order by id desc limit 0,10");
4. while ($row=mysql_fetch_array($query)) {
5. ?>
6. <div class="single_item">
7. <div class="element_head">
8. <div class="date"><?php echo date('m-d H:i',strtotime($row['updatetime']));?></div>
9. <div class="author"><?php echo $row['id'];?></div>
10. </div>
11. <div class="content"><?php echo $row['message'];?></div>
12. </div>
13. <?php } ?>
14. </div>
15. <div class="nodata"></div>

js文件

 

JavaScript Code

1. <script type="text/javascript">
2. $(function(){
3. var winH = $(window).height(); //页面可视区域高度
4. var i = 1;
5. $(window).scroll(function () {
6. var pageH = $(document.body).height();
7. var scrollT = $(window).scrollTop(); //滚动条top
8. var aa = (pageH-winH-scrollT)/winH;
9. if(aa<0.02){
10. $.getJSON("result.php",{page:i},function(json){
11. if(json){
12. var str = "";
13. $.each(json,function(index,array){
14. var str = "<div class="single_item"><div class="element_head">";
15. var str = str + "<div class="date">"+array['date']+"</div>";
16. var str = str + "<div class="author">"+array['author']+"</div>";
17. var str = str + "</div><div class="content">"+array['content']+"</div></div>";
18. $("#container").append(str);
19. });
20. i++;
21. }else{
22. $(".nodata").show().html("别滚动了，已经到底了。。。");
23. return false;
24. }
25. });
26. }
27. });
28. });
29. </script>

result.php

PHP Code

1. <?php
2. include("conn.php");
3. $page = intval($_GET['page']);  //获取请求的页数
4. $start = $page*5;
5. $query=mysql_query("select * from content order by id desc limit $start,5");
6. while ($row=mysql_fetch_array($query)) {
7. $arr[] = array(
8. 'content'=>$row['message'],
9. 'author'=>$row['id'],
10. 'date'=>date('m-d H:i',strtotime($row['updatetime']))
11. );
12. }
13. echo json_encode($arr);  //转换为json数据输出
14. ?>