使⽤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;
jquery在线图片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(){
//上⼀页
if(args.current > 1){
obj.append('<a href="javascript:;" class="prevPage">上⼀页</a>');
}else{
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.append('<span class="disabled">下⼀页</span>');
}
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
<("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);
}
});
//上⼀页
<("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);
}
});
//下⼀页
<("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){
ws.length>0){
$(".tcdPageCode").show();
pageCount=data.pageCount;      //总页数
var $ul=$("#imgArea");
$.ws, 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">'+eleme                      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 });

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。