使用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;}

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);

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 });