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