图片展示，带分页

展示效果如下，可分页

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

前端数据绑定代码

<div id="fuiContent" class="fui-content">
        <div id="page"></div>
        <div id="datagrid" class="clearfix"></div>
</div>

<script>
        var $page = $("#page");
        var pagesize=20;
        epoint.initPage('coursecstudypxphotolistaction', null, function(data) {
            getPhotos();
        });

        $page.pagination({
            pageSize : pagesize
        });

        function getPhotos(pageIndex) {
            pageIndex = pageIndex || 0;
            epoint.execute("getPhotos", '', [ pageIndex.toString(),pagesize ], function(rtn) {
                renderGrid(rtn.photos, rtn.totalCount, pageIndex);
            });
        }
 

        function renderGrid(photos, totalCount, pageIndex) {
            var $grid = $("#datagrid");
            $grid.empty();
            $(".photoCount").html(0);

            if (!photos) {
                return;
            }

            $page.pagination("destroy");
            $page.pagination({
                pageIndex : pageIndex,
                pageSize : pagesize,
                total : totalCount
            });
            $page.on("pageClicked", function(e, data) {
                getPhotos(data.pageIndex,data.pageSize);
            });

            $(".photoCount").html(totalCount);

            var html = "";

            for (var i = 0, length = photos.length; i < length; i++) {
                var photo = photos[i];

                var imageSrc =photo.imageSrc;// _rootPath;
                
                html += '<div class="item-inner" data-guid="' + (photo.attachguid || "") + '">';
                html += "<div class='image'>";
                html += '<img class="item-image" src="' + imageSrc + '"></img>';
                html += '</div>';

                html += "<div class='course-row name'>" + (photo.photoname || "") + "</div>";
                html += "<div class='course-row text'>"+ (photo.date || "") + "</div>";
                html += "<div class='course-row text'>" + (photo.time || "") + "</div>";
                html += '</div>';
            }
            $grid.html(html);

        } 
    </script>

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

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

提取码：ypwu