图片展示，带分页

展示效果如下，可分页

后端数据返回，不做详细介绍，返回json格式的数据即可

前端数据绑定代码

1 <div id="fuiContent" class="fui-content">
2         <div id="page"></div>
3         <div id="datagrid" class="clearfix"></div>
4 </div>

View Code

 1 <script>
 2         var $page = $("#page");
 3         var pagesize=20;
 4         epoint.initPage('coursecstudypxphotolistaction', null, function(data) {
 5             getPhotos();
 6         });
 7 
 8         $page.pagination({
 9             pageSize : pagesize
10         });
11 
12         function getPhotos(pageIndex) {
13             pageIndex = pageIndex || 0;
14             epoint.execute("getPhotos", '', [ pageIndex.toString(),pagesize ], function(rtn) {
15                 renderGrid(rtn.photos, rtn.totalCount, pageIndex);
16             });
17         }
18  
19 
20         function renderGrid(photos, totalCount, pageIndex) {
21             var $grid = $("#datagrid");
22             $grid.empty();
23             $(".photoCount").html(0);
24 
25             if (!photos) {
26                 return;
27             }
28 
29             $page.pagination("destroy");
30             $page.pagination({
31                 pageIndex : pageIndex,
32                 pageSize : pagesize,
33                 total : totalCount
34             });
35             $page.on("pageClicked", function(e, data) {
36                 getPhotos(data.pageIndex,data.pageSize);
37             });
38 
39             $(".photoCount").html(totalCount);
40 
41             var html = "";
42 
43             for (var i = 0, length = photos.length; i < length; i++) {
44                 var photo = photos[i];
45 
46                 var imageSrc =photo.imageSrc;// _rootPath;
47                 
48                 html += '<div class="item-inner" data-guid="' + (photo.attachguid || "") + '">';
49                 html += "<div class='image'>";
50                 html += '<img class="item-image" src="' + imageSrc + '"></img>';
51                 html += '</div>';
52 
53                 html += "<div class='course-row name'>" + (photo.photoname || "") + "</div>";
54                 html += "<div class='course-row text'>"+ (photo.date || "") + "</div>";
55                 html += "<div class='course-row text'>" + (photo.time || "") + "</div>";
56                 html += '</div>';
57             }
58             $grid.html(html);
59 
60         } 
61     </script>

View Code

需要引用的js和css样式代码：

https://pan.baidu.com/s/1-X6iA5NAEY5kwquG0DI5qQ

提取码：ypwu