首页>>Jquery文字>>jquery 滚动加载更多数据内容(2014-03-09)

jquery 滚动加载更多数据内容

 本例与《无刷新动态加载数据，滚动条加载》效果一样的,本例就只有一个文件不同于其他的几个案例。

jquery 滚动加载更多数据内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

PHP Code
  1. <?php  
  2. require "../../conn.php";  
  3. $limit = 10; #item per page  
  4. $page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];  
  5. # sql query  
  6. $sql = "SELECT * FROM content ORDER BY id DESC";  
  7. # find out query stat point  
  8. $start = ($page * $limit) - $limit;  
  9. # query for page navigation  
  10. if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){  
  11.     $next = ++$page;  
  12. }  
  13. $query = mysql_query( $sql . " LIMIT {$start}, {$limit}");  
  14. if (mysql_num_rows($query) < 1) {  
  15.     header('HTTP/1.0 404 Not Found');  
  16.     echo 'Page not found!';  
  17.     exit();  
  18. }  
  19. ?>  
  20.   
  21. <!doctype html>  
  22. <html lang="en">  
  23. <head>  
  24.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  25.     <title>jquery 滚动加载更多数据内容</title>  
  26.     <link rel="stylesheet" href="css/style.css">  
  27.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
  28.     <script type="text/javascript" src="js/jquery-ias.min.js"></script>  
  29.     <script type="text/javascript">  
  30.         $(document).ready(function() {  
  31.             // Infinite Ajax Scroll configuration  
  32.             jQuery.ias({  
  33.                 container : '.wrap', // main container where data goes to append  
  34.                 item: '.item', // single items  
  35.                 pagination: '.nav', // page navigation  
  36.                 next: '.nav a', // next page selector  
  37.                 loader: '<img src="css/ajax-loader.gif"/>', // loading gif  
  38.                 triggerPageThreshold: 3 // show load more if scroll more than this  
  39.             });  
  40.         });  
  41.     </script>  
  42.     <link rel="stylesheet" type="text/css" href="../demo.css">  
  43. </head>  
  44. <body>  
  45. <div class="wrap">  
  46.     <h1><a href="#">Data load while scroll</a></h1>  
  47.   
  48.     <!-- loop row data -->  
  49.     <?php while ($row = mysql_fetch_array($query)): ?>  
  50.     <div class="item" id="item-<?php echo $row['id']?>">  
  51.         <h2>  
  52.             <span class="num"><?php echo $row['id']?></span>  
  53.             <span class="name"><?php echo $row['name']?></span>  
  54.         </h2>  
  55.         <p><?php echo $row['message']?></p>  
  56.     </div>  
  57.     <?php endwhile?>  
  58.   
  59.     <!--page navigation-->  
  60.     <?php if (isset($next)): ?>  
  61.     <div class="nav">  
  62.         <a href='index.php?p=<?php echo $next?>'>Next</a>  
  63.     </div>  
  64.     <?php endif?>  
  65. </div><!--.wrap-->  
  66. </body>  
  67. </html>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_286.html