Layui实现图片列表并且可以放大查看

首先建一个DIV层

 1 <div class="layui-row layui-col-space10">
 2     <div class="layui-col-md12">
 3         <div class="layui-card">
 4             <div class="layui-card-body">
 5                 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
 6                     <legend>图片列表</legend>
 7                 </fieldset>
 8                 <div class="layui-row layui-col-space30" style="height: 300px; overflow:auto" id="LAY_Images">                            
 9                 </div>
10             </div>
11         </div>
12     </div>
13 </div>

 

然后写一个数据请求的方法

 1 　　　　　　　　　//请求图像数据
 2                 $.ajax({
 3                     url: "接口路径",
 4                     data: { 'Id': 1 },
 5                     type: "post",
 6                     dataType: "json",
 7                     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
 8                     success: function (data) {
 9                         $("#LAY_Images").empty();
10                         $.each(data.data, function (index, item) {
11                             $("#LAY_Images").append(
12                                 "<div class='layui-col-md2 ew-datagrid-item'>" +
13                                 "<div class='project-list-item'>" +
14                                 "<img class='project-list-item-cover' src='" + item.imgname + "' onclick='previewImg(this)' />" +
15                                 "</div>" +
16                                 "</div>"
17                             );
18                         })
19                         form.render($('#LAY_Images'));
20                     },
21                     error: function (data) {
22 
23                     }
24                 });

 

这样就渲染好图片的列表了，如果不想要放大功能，去掉onclick事件就可以了，如果需要，加上下面的方法

 1 　　　　　//点击图片放大查看
 2         function previewImg(obj) {
 3             var img = new Image();
 4             img.src = obj.src;
 5             var height = img.height; //获取图片高度
 6             var width = img.width; //获取图片宽度
 7             if (height > 1000 || width > 800) {
 8                 height = height / 1.5;
 9                 width = width / 1.5;
10             }
11             var imgHtml = "<img src='" + obj.src + "' style='width: " + width + "px;height:" + height + "px'/>";
12             //弹出层
13             layer.open({
14                 type: 1,
16                 offset: 'auto',
17                 area: [width + 'px', height + 'px'],
18                 shadeClose: true,//点击外围关闭弹窗
19                 scrollbar: true,//不现实滚动条
20                 title: false, //不显示标题
21                 content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
22                 cancel: function () {
23                     
24                 }
25             });
26         }

这样基本就可以做出一个图片列表框出来了

 

posted @ 2022-11-01 11:30  Core、陈  阅读(2193)  评论(2)  编辑  收藏  举报