jquery瀑布流加载搭配ajax请求

    .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;
    }



    

        
            添加
            
        
    
    

        
           预习资源
        
    
    

        
            
                
                    
                        实验箱：
                    
                    
                        
                            请选择实验箱
                            {foreach $testBoxData as $vo}
                            {$vo.name}
                            {/foreach}
                        
                    
                    
                           课程：
                    
                    
                        

                        
                    
                    
                           项目：
                    
                    
                        

                        
                    
                    
                        
                            
                    
                
            

        
    
    

        

            
预习资源
            
FAQ
            
指导视频
            
实验讲义
        
        

            

                

                    {foreach $data.p as $v}
                    

                        
                        
                        {$v.title}
                        {$v.s_name}
                        {$v.usages}
                        {:date('Y-m-d',$v.ctime)}
                    
                    {/foreach}
                
            
            

                

                    {foreach $data.f as $v}
                    

                        
                        
                        {$v.title}
                        {$v.s_name}
                        {$v.usages}
                        {:date('Y-m-d',$v.ctime)}
                    
                    {/foreach}
                
            
            

                

                    

                        
                        
                        指导视频
                        北京大学
                        300
                        2019-3-4
                    
                
            
            

                

                    

                        
                        
                        实验讲义
                        北京大学
                        300
                        2019-3-4
                    
                
            
        
    






    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= $(document).height()-100 && isbool==true){
                getItems();
            }
        }
        //绑定事件
        $(window).on("load",function(){
            $(document).bind("mousewheel DOMMouseScroll",function(){
                wheelListen();
            });
        })
    });