自写滚动加载(面向过程版)

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");
                }
        }
posted @ 2016-10-27 16:00  水止  阅读(210)  评论(0)    收藏  举报