圖片列表分頁插件
圖片分頁插件，支持本地js數組分頁加載和ajax服務器端加載。
圖片有多種展示動畫效果，可以自定義，主要用到了animate.min.css，當然這個不是必須項，如果不需要，可以去掉animate.min.css引用。
效果
引用
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<link href="css/imggrid.css" rel="stylesheet" />
<script src="js/imggrid.js"></script>
網頁標簽
<div id="imggrid">
</div>
js初始化
js加載數據有兩種方式：
1、本地加載
var data = {
"page": 1,//當前頁碼
"records": 19,//總條數
"rows": [{ "Id": 60, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 61, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 62, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 63, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 64, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 65, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 66, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 67, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 68, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 69, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 70, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 71, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 72, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 73, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 74, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 75, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 76, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 77, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" },
{ "Id": 78, "ImgUrl": "http://ojna4zpbt.bkt.clouddn.com/1.jpg" }
]
};
$('#imggrid').imgGrid({
title: '圖片集',
type: 'GET',//GET|POST
data:data,//本地數據
//url: 'Data/data.json',//ajax URL
params: { type: 0 },//url參數
height: '400px',
width: '850px',
img: { width: '200px', animate: 'zoomIn' },//圖片寬度，及動畫效果
onClick: function (obj, index, item) {//點擊圖片事件
alert(index);
},
render: function (item, index) {//自定義顯示圖片
var str = '<img src="' + item.ImgUrl + '">';
return str;
}
});
2、ajax從服務器分頁加載
$('#imggrid').imgGrid({
title: '圖片集',
type:'GET',//GET|POST
url: 'Data/data.json',//url
params: { type: 0 },//url參數
height: '400px',
width: '1000px',
img: { width: '200px', animate: 'zoomIn' },//圖片寬度，及動畫效果
onClick: function (obj,index, item) {//點擊圖片事件
alert(index);
},
render: function (item, index) {//自定義顯示圖片
var str = '<img src="' + item.ImgUrl + '">';
return str;
}
});