js和ajax实现滚动到底部自动加载数据实例

最新推荐文章于 2023-08-18 23:40:12 发布

attitue

最新推荐文章于 2023-08-18 23:40:12 发布

阅读量2.2k

点赞数 1

文章标签：下滑加载

jq和ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、功能描述

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

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


$(window).scrollTop()+$(window).height()>=$(document).height();
---------------------------------------------------------------

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

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

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

二、效果图

这里写图片描述

三、源代码

<!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);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
        @keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);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 1.1s infinite linear;animation: rotate 1.1s infinite linear;}
        .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;display:block;}
    </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="http://www.86y.org/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～到底了";
        $(".loadmore").remove();
        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($(".loadmore").length==0)
        {
            var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'
            $("body").append(txt);
        }

        if (scrollTop + windowHeight -scrollHeight<=50 ) {
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作


            //防止未加载完再次执行
            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){
                    if(data=="")
                    {
                        sover = 1;
                        loadover();                     
                        if (page == 1) {
                            $("#no_msg").removeClass("hidden");
                            $(".loadover").remove();
                        }
                    }
                    else
                    {
                        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>

DEMO地址：http://www.86y.org/demo/jqscroll/(建议使用手机打开效果更佳)

转载自：:http://www.86y.org/art_detail.aspx?id=752【jq滚动到底部自动加载数据实例】幸凡学习网

attitue

关注

1
点赞
踩
6

收藏

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

一、功能描述滚动下拉到页面底部加载数据是很多瀑布流网站的做法，本实例是固定数据，小菜总结记录之用，高手勿喷。首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的 height，jquery如下代码:$(window).scrollTop()+$(window).height()&gt;=$(document).he...
复制链接

扫一扫