jq滚动到底部自动加载数据实例

最新推荐文章于 2022-10-31 21:05:25 发布

XINGXUEXX

最新推荐文章于 2022-10-31 21:05:25 发布

阅读量1.4k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

转载地址http://www.86y.org/art_detail.aspx?id=752

滚动下拉到页面底部加载数据是很多瀑布流网站的做法，本实例是固定数据，小菜总结记录之用，高手勿喷。

首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的 height，jquery如下代码:

    Js代码  
  
 $(window).scrollTop()+$(window).height()>=$(document).height();  

再给window绑定scroll事件来实现加载数据显示。

本实例的主要是提供手机版使用所以使用了CSS3的旋转模拟图片加载效果。

在实例中实现了自动判断是否已经具备滚动事件的条件，如果高度不足自动补充下一页，直接满足滚动事件能有效执行，如果已经加载完所有内容，就提示：【Duang～到底了】

</pre><pre name="code" class="html"><!DOCTYPE HTML> 
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>  
<title>jq滚动到底部自动加载数据实例|幸凡学习网</title>  
  
<style>  
        html,body,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}  
        body,html{line-height:1;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;font-size:16px;color:#333;}  
        ol,ul{list-style:none;}  
        a{text-decoration:none;}  
        body{background:#f2f2f2;}  
        .prolist li{height:50px;line-height:50px;border-bottom:1px solid #f8f8f8;background:#fff;padding:0 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}  
        .prolist li a{color:#333;font-size:16px;}  
          
        /**加载效果旋转**/  
        @-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(180deg);}100% {-webkit-transform: rotate(360deg);}}  
        @keyframes rotate {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}}  
          
        .loadmore {display:block;line-height: 50px;text-align:center;color:#ccc;font-size:14px;}  
        .loadmore span{height:20px;width: 20px;border-radius: 100%;display:inline-block;margin:10px;border:2px solid #f60;border-bottom-color: transparent;vertical-align: middle;-webkit-animation: rotate 0.75s 0 linear infinite;animation: rotate 0.75s 0 linear infinite;}  
        .loadover{position:relative;margin:0 12px;padding:24px 0;height:20px;line-height:20px;color:#909090;text-align: center;}  
        .loadover span{position:relative;display:inline-block;padding:0 6px;height:20px;background:#F2F2F2;z-index:2}  
        .loadover:after {content:''position: absolute;left: 0;top: 50%;width: 100%;height: 1px;background: #DCDCDC;z-index: 1;}  
    </style>  
</head>  
<body>  
<!-- 产品列表 开始-->  
<ul class="prolist">  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
    <li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>  
</ul>  
<!-- 产品列表 结束 -->  
  
<script type="text/javascript" src="js/jquery.min.js"></script>  
<script>  
var page=1;  
var finished=0;  
var sover=0;  
  
//如果屏幕未到整屏自动加载下一页补满  
var setdefult=setInterval(function (){  
    if(sover==1)  
        clearInterval(setdefult);     
    else if($(".prolist").height()<$(window).height())  
        loadmore($(window));  
    else  
        clearInterval(setdefult);  
},500);  
  
//加载完  
function loadover(){  
    if(sover==1)  
    {     
        var overtext="Duang～到底了";  
        if($(".loadover").length>0)  
        {  
            $(".loadover span").eq(0).html(overtext);  
        }  
        else  
        {  
            var txt='<div class="loadover"><span>'+overtext+'</span></div>'  
            $("body").append(txt);  
        }  
    }  
}  
  
//加载更多  
var vid=0;  
function loadmore(obj){  
    if(finished==0 && sover==0)  
    {  
        var scrollTop = $(obj).scrollTop();  
        var scrollHeight = $(document).height();  
        var windowHeight = $(obj).height();  
          
        if (scrollTop + windowHeight -scrollHeight<=50 ) {  
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作  
            var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'  
            $("body").append(txt);  
              
            //防止未加载完再次执行  
            finished=1;  
              
            var result = "";  
            for(var i = 0; i < 6; i++){  
                vid++;  
                result+='<li>'  
                            +'<a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！'+parseInt(vid)+'</a>'  
                        +'</li>'  
            }  
            setTimeout(function(){  
                $(".loadmore").remove();  
                $('.prolist').append(result);  
                page+=1;  
                finished=0;  
                //最后一页  
                if(page==10)  
                {  
                    sover=1;  
                    loadover();  
                }  
            },1000);  
            /*$.ajax({  
                type: 'GET',  
                url: 'json/more.json?t=25&page='+page,  
                dataType: 'json',  
                success: function(data){  
                    var result = ''  
                    for(var i = 0; i < data.lists.length; i++){  
                        result+='<li>'  
                                    +'<a href="'+data.lists[i].link+'">'+data.lists[i].title+parseInt(page+1)+"-"+i+'</a>'  
                                +'</li>'  
                    }  
                      
                    // 为了测试，延迟1秒加载  
                    setTimeout(function(){  
                        $(".loadmore").remove();  
                        $('.prolist').append(result);  
                        page+=1;  
                        finished=0;  
                        //最后一页  
                        if(page==10)  
                        {  
                            sover=1;  
                            loadover();  
                        }  
                    },1000);  
                },  
                error: function(xhr, type){  
                    alert('Ajax error!');  
                }  
            });*/  
        }  
    }  
}  
//页面滚动执行事件  
$(window).scroll(function (){  
    loadmore($(this));  
});  
</script>  
</body>  
</html>

XINGXUEXX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq滚动到底部自动加载数据实例

jq滚动到底部自动加载数据实例|幸凡学习网 html,body,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;} body,html{line-height:1;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;f
复制链接

扫一扫