內容涉及：php、分頁、jquery、div+css
實例下載：http://download.csdn.net/detail/roro5119/7373905
index.php
<? //數據庫配置文件 include("conn.php"); //默認搜索 $page = $_GET["page"] ? $_GET["page"] : 1; $pagesize = 20; $pageval = ($page-1)*20; $sql="select `pic` from `mypic` limit $pageval,$pagesize"; $query = mysql_query($sql); ?> <!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" /> <script src="http://files.cnblogs.com/tinyphp/jquery-1.3.2.min.js"></script> <link rel="stylesheet" href="page.css"> <title>延遲加載</title> </head> <style type="text/css"> .showbox{ width:1000px; margin:0 auto;} .showbox img{ padding:5px; background:#CCCCFF;} .add-more{ width: 1000px; background: yellow;height: 100px; line-height: 30px; text-align: center; margin: 0 auto; display: none;} </style> <body> <div class="showbox"> <? while($row=mysql_fetch_array($query)){ ?> <img src="<?=$row["pic"];?>" alt="" width="200" height="200"> <? } ?> </div> <!--數據加載提示，默認隱藏--> <div class="add-more">數據正在加載...</div> <!--js部分--> <script type="text/javascript"> $(function(){ var downrange = 100; //下邊界-參考正在加載提示層/px var num = <?=$page;?>; //初始頁碼 var maxnum = num+5; //設置加載次數 var $main = $(".showbox"); //主體 var $loaddiv = $(".add-more") //加載提示層 var totalheight = 0; //判斷是否需要異步 function ifLoad(){ //滾動條距離頂部距離 var scrolltotop=parseFloat($(window).scrollTop()); //窗口高度 var winheight = parseFloat($(window).height()); //內容總高度 var conheight = parseFloat($(document).height())-downrange; //總高度 totalheight = scrolltotop + winheight; //判斷是否加載，當操作高度比內容大，空間充裕->加載 if(totalheight >= conheight && num!=maxnum){ ajaxLoad(num); num++; } } //ajax-fun function ajaxLoad(page){ $.ajax({ url:"ajax.php", type:"post", data:{page:page,maxnum:maxnum}, success:function(result){ //追加數據 $main.append(result); } }) } //加載中隱藏顯示 $loaddiv.ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); }) //scroll-fun $(window).scroll(ifLoad); }) </script> </body> </html>
異步文件：
<? //數據庫配置文件 include("conn.php"); //每頁顯示信息 $pagesize=20; //最大加載次數 $maxnum = $_POST["maxnum"]-1; //從哪里開始 $page=$_POST["page"]; $nextpagestart = $page*$pagesize; $sql = "select `pic` from `mypic` limit $nextpagestart,$pagesize"; $query =mysql_query($sql); while($row = mysql_fetch_array($query)){ //內容 ?> <img src="<?=$row["pic"];?>" alt="" width="200" height="200"> <? } //分頁 if($page ==$maxnum){ include('page.class.php'); $sqlsum = "select `id` from `mypic`"; $querysum = mysql_query($sqlsum); //數據總數 $total = mysql_num_rows($querysum); //參數對應位置：總記錄，每頁顯示的條數，當前頁，連接的地址 $my_page=new PageClass($total,$pagesize,$page,'?page={page}'); //輸出頁碼 echo $my_page->myde_write(); exit; } ?>