通过打开新窗口获取内容后，以回调的方式返回主窗口

传入的参数如下

    multi 是否支持多选 1 表示可以同时选中

   callback 父层的回调函数处理

效果如图

css 样式

<style type="text/css">
    html, body {
        padding: 0;
    }
    .item{
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        cursor: pointer;
    }
    .item img{
        width: 185px;
        height: 185px;
    }
    .item i{
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 5px;
        border-radius: 15px;
        background-color: #fff;
        color: #fff;
    }

    .item i.on{
        background-color: #1E9FFF;
    }
    .data{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: auto;
    }
    .content{
        margin-top: 50px;
    }
    .data .layui-form-item{
        margin-bottom: 0;
    }
</style>

html 代码

<div class="data" style="padding: 10px;">
    <div style="position: fixed;top: 0;left: 0;width: 100%;padding: 10px;box-sizing: border-box;z-index: 999;background-color: #fff;">
        <div class="layui-form layui-form-pane" >
            <div class="layui-form-item" >
                <label class="layui-form-label">图片关键词</label>
                <div class="layui-input-block" style="position: relative;">
                  <input type="text" name="search"  autocomplete="off" placeholder="请输入图片关键词" class="layui-input">
                  <a class="layui-btn layui-btn-normal" id="search" style="position: absolute;top: 0;right: 0;border-radius: 0;"><i class="layui-icon layui-icon-search"></i></a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="content">
    
    </div>
</div>

<div class="submit">
    <a class="layui-btn layui-btn-normal" id="submit">确定</a>
</div>

js代码

<script src="/source/plugin/{$identifier}/js/lodash.min.js"></script>
<script type="text/javascript">
    var $;
    var page = 1;
    var multi = "{$_GET['multi']}";
    layui.use(['form', 'element'], function () {
        $ = layui.$
            , form = layui.form
            , element = layui.element;
        $('.content').on('click','.item',function(e){
            //默认只能单选
            if (multi=="" || multi=="0" || multi=="false") {
                $('.content .item i').removeClass('on');    
            } 

            if ($(this).children('i').hasClass('on')) {
                $(this).children('i').removeClass('on');
            } else {
                $(this).children('i').addClass('on');
            }
        });
        
        $(document).keyup(function (event) {
            if (event.keyCode == 13) {
                $("#search").trigger("click");
            }
        });

        new SE('.data','.content',getList);

        $('#search').click(function(){
            var text = $('input[name=search]').val();
            if (text=='') {
                layer.msg('请输入需要查找的关键词', {time:1000});
                return false;
            }
            getList(true);
        });
        
        $('#submit').click(function(e){
            var items = $('.item i.on');
            var imgs = []
            for (var i = 0; i < items.length; i++) {
                imgs.push($(items[i]).parent().children('img').attr('src'));
            }

            var callback = "{$_GET['callback']}";
            if (callback!="") {
                parent[callback](imgs);
            }
            parent.layer.closeAll('iframe');
        });
    });

    function getList(flush=false) {
        if (flush == true) {
            page = 1;
            var index = 0;
            $('.content').empty();
            list_data = [];
        } else {
            if (page == -1) {
                console.log('已经加载完毕了')
                return false;
            }
        }
        
        var index = layer.load(0);
        $.post('/api/spider/images',{'kw':$('input[name=search]').val(),'page':page},function(res){
            layer.close(index);
            var html = '';
            if (res.status==1) {
                for (var i = 0; i < res.data.length; i++) {
                    html += '<div class="item">';
                    html += '<img src="{0}">'.format(res.data[i].small);
                    html += '<i class="layui-icon layui-icon-ok"></i>';
                    html += '</div>';
                }
                $('.content').append(html);
                page++;
            } else {
                page = -1;
                alert(res.msg);
            }
            
        });

    }

    /* 
        容器滚动更新 引入放抖动处理
        pselector  父容器选择器  需要固定高度 超出滚动
        chilsector  子容器选择器 
        callback  滚动触发更新的回调操作
    */
    function SE(pselector, chilsector, callback) {
        $(pselector).on('scroll', _.debounce(scrollevent, 50));
        function scrollevent() {
            console.log('scrollevent')
            // http://demo.demohuo.cn/783/
            // https://www.cnblogs.com/wangshengli520/p/11010132.html
            //内部高度 - 容器滚动条距离顶部高度 - 容器本身的高度(没有超过容器高度不会再发生滚动)  <一定的距离 认为可以更新
            if ($(chilsector).height() - $(pselector).scrollTop() < (30 + $(pselector).height())) {
                console.log('是时候更新了');
                if (callback != undefined) {
                    callback();
                }
            }
        }
    }
</script>