谁有用layui做成的图片列表显示,急用!!!!!

提问 未结 10 2083
IT_bai
IT_bai 2018-10-21
悬赏:20飞吻
版本:layui 浏览器:
需要页面加载很多图片 点击图片进行缩放等,有人能分享个么,感激不尽。
回帖
  • @IT_bai
    这个怎么样 写了一下午了
    1 回复
  • 哈哈哈 我也是正需要这个 目前自己编写那里
    0 回复
  • IT_bai
    2018-10-21
    @谁是大流氓 做出来可以分享一下 哈哈哈
    0 回复
  • 也许丶
    2018-10-21
    @谁是大流氓 这个不错啊
    0 回复
  • IT_bai
    2018-10-22
    @谁是大流氓 不错不错 可以分享到社区的交流中 哈哈哈 可以分享代码么 我这后台 前端确实不懂什么布局啥的 弄得特难看 只能做到这个 还加载的在右边....
    0 回复
  • @也许丶 谢谢
    0 回复
  • @IT_bai 在开会 开完再分享下代码
    0 回复
  • IT_bai
    2018-10-22
    @谁是大流氓 好的
    0 回复
  • @IT_bai
    <head>
    <style>
    .layui-upload-list dd {
    position: relative;
    margin: 0 10px 10px 0;
    float: left
    }

    .layui-upload-list li {
    position: relative;
    margin: 0 10px 10px 0;
    float: left;
    width: 15%;
    min-width: 305px;
    }

    .layui-upload-list .operation {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    }

    .layui-upload-list .operation i {
    cursor: pointer;
    background: #2F4056;
    padding: 2px;
    line-height: 15px;
    text-align: center;
    color: #fff;
    float: left;
    filter: alpha(opacity=80);
    -moz-opacity: .8;
    -khtml-opacity: .8;
    opacity: .8
    }

    </style>
    </head>
    <div class="layui-row">
    <ul class="layui-upload-list">
    #for(d : imgs)
    <li><div class="layui-card img-card">
    <div class="layui-card-header">
    #(d.name)
    </div>
    <div class="layui-card-body">
    <div class="img-box">
    <img src="../#(d.url)" alt="#(d.name)" title="#(d.name)">
    </div>
    <form action="/house/editImg" method="post" class="layui-form layui-form-pane mtop10">
    <input name="houseId" type="hidden" value="#(houseId)">
    <input name="id" type="hidden" value="#(d.id)">
    <div class="layui-form-item">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-block">
    <input name="name" type="text" class="layui-input" placeholder="图片名称" value="#(d.name)">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-block">
    <select name="type">
    <option></option>
    #for(t : type)
    #if(d.type == t.value)
    <option value="#(t.value)" selected>#(t.name)</option>
    #else
    <option value="#(t.value)">#(t.name)</option>
    #end
    #end
    </select>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-block">
    <input name="sort" type="text" class="layui-input" placeholder="图片排序" value="#(d.sort)">
    </div>
    </div>
    <div class="layui-form-item layui-right">
    <div class="layui-btn-group">
    <button class="layui-btn layui-btn-sm" type="submit" lay-filter="submit"><i class="layui-icon"></i>提交</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger del" data-id="#(d.id)"><i class="layui-icon"></i>删除</button>
    </div>
    </div>
    </form>
    </div>
    </div></li>
    #end
    </ul>
    </div>
    0 回复
  • IT_bai
    2018-10-24
    @谁是大流氓 就是是用的流加载么
    0 回复