您的位置：首页 > 其它

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

2015-09-07 11:15 381 查看 
转载地址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">好经典人生语句，经典得让人心痛
4000
！</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>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航