jquery瀑布流加载搭配ajax请求

<style>
    .item{
        width: 200px;
        height: auto;
        box-sizing: border-box;
        border: 1px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 15px #666;
        -moz-box-shadow: 0 0 15px #666;
        box-shadow: 0 0 15px #666;
        /*position: absolute;*/
        text-align: center;
        display: inline-block;
        margin-left: 40px;
        margin-top: 10px;
        padding-bottom: 10px;
    }
    .item>img{
        height: auto;
        width: 180px;
        display: inline-block;
        margin: 10px;
    }
</style>

<div class="page-content" style="height: 1000px">
    <div class="col-sm-6 pull-right">
        <a class="btn btn-sm btn-primary pull-right add" style="margin-right: 20px;" href="editpreview" target="_blank">
            添加
            <i class="icon-reply icon-only"></i>
        </a>
    </div>
    <div class="page-header">
        <h1>
           预习资源
        </h1>
    </div><!-- /.page-header -->
    <div class="" style="margin-top: 10px;margin-bottom: 10px">
        <form action="{:url('preview')}" method="get">
            <table>
                <tr>
                    <td>
                        实验箱：
                    </td>
                    <td>
                        <select name="t_id" id="t_id" style="border: 1px silver solid">
                            <option value="">请选择实验箱</option>
                            {foreach $testBoxData as $vo}
                            <option value="{$vo.id}" {if condition="input('t_id')==$vo.id " }selected{/if}>{$vo.name}</option>
                            {/foreach}
                        </select>
                    </td>
                    <td class="course" style="display: none;">
                        &nbsp;&nbsp;&nbsp;课程：
                    </td>
                    <td class="course" style="display: none">
                        <select name="c_id" id="c_id" style="border: 1px silver solid">

                        </select>
                    </td>
                    <td class="item" style="display: none;">
                        &nbsp;&nbsp;&nbsp;项目：
                    </td>
                    <td class="item" style="display: none;">
                        <select name="i_id" id="i_id" style="border: 1px silver solid">

                        </select>
                    </td>
                    <td>
                        <input type="hidden" name="index" value="0" id="index">
                        &nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="搜索" class="layui-btn">
                    </td>
                </tr>
            </table>

        </form>
    </div>
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this">预习资源</li>
            <li>FAQ</li>
            <li>指导视频</li>
            <li>实验讲义</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="picturewall0">
                    {foreach $data.p as $v}
                    <div class='item'>
                        <img src="{:config('public.static')}/imgaes/p.jpg">
                        <hr/>
                        <h4>{$v.title}</h4>
                        <h4>{$v.s_name}</h4>
                        <h4>{$v.usages}</h4>
                        <h4>{:date('Y-m-d',$v.ctime)}</h4>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="picturewall1">
                    {foreach $data.f as $v}
                    <div class='item'>
                        <img src="{:config('public.static')}/imgaes/f.jpg">
                        <hr/>
                        <h4>{$v.title}</h4>
                        <h4>{$v.s_name}</h4>
                        <h4>{$v.usages}</h4>
                        <h4>{:date('Y-m-d',$v.ctime)}</h4>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="picturewall2">
                    <div class='item'>
                        <img src="{:config('public.static')}/imgaes/p.jpg">
                        <hr/>
                        <h4>指导视频</h4>
                        <h4>北京大学</h4>
                        <h4>300</h4>
                        <h4>2019-3-4</h4>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="picturewall3">
                    <div class='item'>
                        <img src="{:config('public.static')}/imgaes/p.jpg">
                        <hr/>
                        <h4>实验讲义</h4>
                        <h4>北京大学</h4>
                        <h4>300</h4>
                        <h4>2019-3-4</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- /.page-content -->
<input type="hidden" id="pPage" value="2" where="1" wheight="1000">
<input type="hidden" id="fPage" value="2" where="1" wheight="1000">
<input type="hidden" id="gPage" value="2" where="1" wheight="1000">
<input type="hidden" id="ePage" value="2" where="1" wheight="1000">
<script>
    var isbool=true;//触发开关，防止多次调用事件
    layui.use('element', function() {
        var $ = layui.jquery
            , element = layui.element;
        element.on('tab(demo)', function(data){
            var index = data.index; //得到当前Tab的所在下标
            var nev = $('.page-header h1');
            var href = $('.add');
            var hides = $('.picturewall'+index);
            var pageArr = ['pPage','fPage','gPage','ePage'];
            var h = $('#'+pageArr[index]).attr('wheight');
            if(index == 0){
                isbool = true;
                nev.html('预习资源');
                href.attr('href','editpreview');
                $('#index').val(0);
                hides.show();
                $('.page-content').height(h);
                $('.picturewall1').hide();
                $('.picturewall2').hide();
                $('.picturewall3').hide();
            }else if(index == 1 ){
                isbool = true;
                nev.html('FAQ');
                href.attr('href','editFaq');
                $('#index').val(1);
                hides.show();
                $('.page-content').height(h);
                $('.picturewall0').hide();
                $('.picturewall2').hide();
                $('.picturewall3').hide();
            }else if(index == 2 ){
                isbool = true;
                nev.html('指导视频');
                href.attr('href','editGuidance');
                $('#index').val(2);
                hides.show();
                $('.page-content').height(h);
                $('.picturewall0').hide();
                $('.picturewall1').hide();
                $('.picturewall3').hide();
            }else if(index == 3 ){
                isbool = true;
                nev.html('实验讲义');
                href.attr('href','editExperiment');
                $('#index').val(3);
                hides.show();
                $('.page-content').height(h);
                $('.picturewall0').hide();
                $('.picturewall1').hide();
                $('.picturewall2').hide();
            }
        });
    });

    $(function(){
        //添加item的函数
        function getItems(){
            var index = $('#index').val(); //得到当前Tab的所在下标
            var modelArr = ['preview','faq','guidance','experiment'];
            var pageArr = ['pPage','fPage','gPage','ePage'];
            var imgArr = ['p.jpg','f.jpg','g.jpg','e.jpg'];
            var model = modelArr[index];
            var img = imgArr[index];
//                    获取页码
            var page = $('#'+pageArr[index]).val();
            var where = $('#'+pageArr[index]).attr('where');
            isbool=false;
            if(where == 1){
                $.ajax({
                    type: "POST",
                    url: "index",
                    async: true,
                    data: {'page':page,'model':model,'f':1},
                    success: function(msg){
                        if(msg.code==1){
                            var str = '';
                            for (var i=0;i<msg.data.length;i++){
                                str +='<div class="item">' +
                                    '      <img src="{:config(\'public.static\')}/imgaes/'+img+'">' +
                                    '      <hr/>'+
                                    '      <h4>'+msg.data[i].title+'</h4>' +
                                    '      <h4>'+msg.data[i].s_name+'</h4>' +
                                    '      <h4>'+msg.data[i].usages+'</h4>' +
                                    '      <h4>'+msg.data[i].ctime+'</h4>' +
                                    '</div>'
                            }
                            $('.picturewall'+index).append(str);
                            $('#'+pageArr[index]).val(parseInt(page)+1);
                            var h = $('.page-content').height();
                            $('.page-content').height(h+800);
                            var wh = $('#'+pageArr[index]).attr('wheight');
                            $('#'+pageArr[index]).attr('wheight',parseInt(wh)+800);
                            isbool=true;
                        }else{
                            $('#'+pageArr[index]).attr('where',0)
                        }

                    }
                });
            }
        }
        //判断文档滚动的位置

        function wheelListen(){
            var srollHeight = $(document).scrollTop();
            console.log(isbool)
            if(srollHeight+$(window).height() >= $(document).height()-100 && isbool==true){
                getItems();
            }
        }
        //绑定事件
        $(window).on("load",function(){
            $(document).bind("mousewheel DOMMouseScroll",function(){
                wheelListen();
            });
        })
    });


</script>