自寫滾動加載(面向過程版)

var buttom = false;//全局標記
var i = 0;//靜態模擬加載次數
//滾動條滾動時執行斷定
$(window).scroll(function(){
            myScroll = $(window).scrollTop();;
            if( ($('body').height() - myScroll) <= window.innerHeight&&!buttom){
                console.log("到底了");
                buttom= true;
                more();
            }
        })
//加載的東東
function more(){
                if(buttom){
                    console.log(111);
                    $(".loading").css("opacity","1");
                    setTimeout(function(){
                        $(".loading").css("opacity","0");
                        console.log("我出來了");
                        $(".content").append('<div class="row">'+
                                                '<div class="col-md-3">'+
                                                    '<div class="article">'+
                                                        '<a href="#">點擊預覽</a>'+
                                                        '<p class="date">2016年10月26日 21:00:38</p>'+
                                                        '<p class="title text-2">今日看點'+i+'~</p>'+
                                                        '<div class="cover">'+
                                                            '<img src="../../common/img/040.jpg" class="img-responsive"/>'+
                                                        '</div>'+
                                                        '<p class="address text-2">清華大學</p>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>');
                        i++;
                        if(i!=3){
                            buttom=false;
                        }else{
                            $('body').append("<p style='text-align: center;'>沒有數據咯</p>")
                        }
                        console.log(buttom);
                    },2000)
                }else{
                    console.log("qqqq");
                }
        }
相關文章
相關標籤/搜索