imglist;图片列表分页插件，图片分页插件，支持本

图片分页插件，支持本地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; } });