使用jQuery進行圖片分頁，每頁造成九宮格

1.引入css文件（可根據本身頁面的佈局進行調整）

/* 圖片框樣式設置 */ 
.list-main{width:100%;height:800px;position:relative;}

.allImgList{
            overflow: hidden;
            width: 30%;
            height: 230px;
            margin-right: 3%;
            margin-top:10px;
            margin-bottom: 1%;
            text-align: center;
            float: left;
    }

.list-img li{
            overflow: hidden;
            width: 98%;
            height: 200px;
            line-height:200px;            
            margin-bottom:10px;
            border: 1px solid #e8e8e8;
            float: left;
        }

.list-img li img{
             width:auto;
             height:auto;
             max-width:100%;
             max-height:100%;    
             vertical-align: middle;
             text-align: center;    
        }

.imgTitle{
        width: 100%;
    }
    

/* 圖片分頁樣式設置 */ 
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;color: #ccc;text-align:center;position: absolute;margin-top: 82%;margin-left: 35%;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;    line-height: 25px;    padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}

page.css

2.引入js文件（不要忘記引入jQuery.js, 我這裏引入的是jquery-1.7.2.min.js，可根據項目須要引入相應的版本，不能過低）

(function($){
    var ms = {
        init:function(obj,args){
            return (function(){
                ms.fillHtml(obj,args);
                ms.bindEvent(obj,args);
            })();
        },
        //填充html
        fillHtml:function(obj,args){
            return (function(){
                obj.empty();
                //上一頁
                if(args.current > 1){
                    obj.append('<a href="javascript:;" class="prevPage">上一頁</a>');
                }else{
                    obj.remove('.prevPage');
                    obj.append('<span class="disabled">上一頁</span>');
                }
                //中間頁碼
                if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
                    obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
                }
                if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
                    obj.append('<span>...</span>');
                }
                var start = args.current -2,end = args.current+2;
                if((start > 1 && args.current < 4)||args.current == 1){
                    end++;
                }
                if(args.current > args.pageCount-4 && args.current >= args.pageCount){
                    start--;
                }
                for (;start <= end; start++) {
                    if(start <= args.pageCount && start >= 1){
                        if(start != args.current){
                            obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
                        }else{
                            obj.append('<span class="current">'+ start +'</span>');
                        }
                    }
                }
                if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
                    obj.append('<span>...</span>');
                }
                if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){
                    obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
                }
                //下一頁
                if(args.current < args.pageCount){
                    obj.append('<a href="javascript:;" class="nextPage">下一頁</a>');
                }else{
                    obj.remove('.nextPage');
                    obj.append('<span class="disabled">下一頁</span>');
                }
            })();
        },
        //綁定事件
        bindEvent:function(obj,args){
            return (function(){
                obj.on("click","a.tcdNumber",function(){
                    var current = parseInt($(this).text());
                    ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current);
                    }
                });
                //上一頁
                obj.on("click","a.prevPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current-1);
                    }
                });
                //下一頁
                obj.on("click","a.nextPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current+1);
                    }
                });
            })();
        }
    }
    $.fn.createPage = function(options){
        var args = $.extend({
            pageCount : 10,
            current : 1,
            backFn : function(){}
        },options);
        ms.init(this,args);
    }
})(jQuery);

jquery.page.js

3.jsp頁面

<div id="certificateContent" class="list-main">         
              <ul id="imgArea" class="list-img"></ul>                                               
</div>

4.js代碼調用（此處個人需求是：點擊按鈕顯示圖片分頁，每頁9張圖片。若要進入頁面就顯示分頁，在初始化時加載便可）

 function getCertificateInfo(){
        
        $(".tcdPageCode").remove();
        $("#certificateContent").append('<div class="tcdPageCode" hidden=""></div>');

        var pageNo=1;     //加載第一頁
        var pageCount=initCertificate(pageNo); 

        $(".tcdPageCode").createPage({   
                pageCount: pageCount,
                current: pageNo,
                backFn: function (p) {
                    pageNo=p;
                   initCertificate(pageNo); 
                }
            });
     
 }
 
 
  //加載圖片
 function initCertificate(pageNo){      
     $("#imgArea").html("");       //清空上一次加載得圖片
     
     var pageCount;       //總頁數
     
     $.ajax({   
         cache: true,
         async: false,
         type: "POST",   
            dataType: "json",
            url: "selPublishCertificateFile",//請求的action路徑  
            data:{
                pageSize:9,
                pageNumber:pageNo
               },
            error: function () {
                alert("請求失敗", "error"); 
            },  
            success:function(data){       
            if(data.rows.length>0){
                $(".tcdPageCode").show();
                 pageCount=data.pageCount;       //總頁數               
                   var $ul=$("#imgArea");              
                  $.each(data.rows, function(index, element) {   //此處li標籤中的a標籤是爲了點擊圖片，顯示大圖所用，不須要放大圖片的，去掉a標籤，直接加入img標籤便可 var str = $('<div class="allImgList"><li><a class="fancybox" data-fancybox-group="gallery" data-fancybox-href="' + element.attachmentPath + '"><img src="' + element.attachmentPath + '"></a></li><div class="imgTitle">'+element.name+'</div></div>');
                      str.appendTo($ul);
                   });             
                  $ul.appendTo($("#certificateContent"));                  
            }
            
            }  
        });
     
     return pageCount;
 }

5.java後臺返回json數據格式

{"pageCount":2,"
total":11,
"rows":[{"id":30,"name":"test1",
"attachmentPath":"/web/qualcert/seeAttachment?companyID=1&certificateId=30&attachment=logo.png"}]}

6.最後的效果以下

 7.備註（若想要實現點擊圖片，放大圖片的效果）

①引入jquery.fancybox.css，  jquery.fancybox.js  （這是放大圖片的一個插件，到官網下載便可）

②上面的a標籤不要去掉

③初始化時加入這句話

//放大圖片, preload爲0，是爲了不「瀏覽器緩存被禁用時出現大量http請求」。$('.fancybox').fancybox({ preload: 0 });