浏览器中的几个高度
document.body.cilentWidth; // 网页可见区域(body)的宽度，整数像素值 document.body.clientHeight; // 网页可见区域(body)的高度，整数像素值 document.body.offsetWidth; // 网页可见区域(body)的宽度，包括border，margin等像素值 document.body.offsetHeight // 网页可见区域(body)的高度，包括border，margin document.body.scrollWidth // 网页正文的宽度，包括有滚动条溢出的宽度 document.body.scrollHeigh // 网页正文的高度，包括有滚动条溢出的高度 滚动条的滚动区域 var top = document.documentElement.scrollTop || document.body.scrollTop; document.body.scrollLeft // window.screen.height; //屏幕分辨率的高 window.screen.width; //屏幕分辨率的宽 window.screen.availHeight; //屏幕可用工作区的高 window.screen.availWidth; //屏幕可用工作区的宽
document.documentElement.scrollHeight // 文档的高度 = $('html').height()
document.documentElement.scrollTop // 滚动条顶部到文档顶部的距离 = $('html').scrollTop()
document.documentElement.clientHeight // 客户端高度
滚动条到底部的时候关系：
clientHeight + scrollTop = scrollHeight
客户端高度 + 滚动上去的高度 = 可滚动高度（文档高度）
那么上拉加载的效果，
用户进入网页：
载入首批数据，文档高度（ $('html').height() == 2500px ）
用户滚动 滚当条，当（监听滚动条的滚动状态）
document.documentElement.scrollTop + document.documentElement.clientHeight + 500 > document.documentElement.scrollHeight
，及用户可滚动剩下500px高度的时候，开始下一次的数据加载
当数据加载的时候，停止滚动条监听，滚动条的触发需要限制，比如触发后2s时间内不再触发。
反复如此，当数据加载完毕的时候，比对现有数据条数，与服务端返回的数据总数，如果相等，则加载完毕，那么清除 滚动条监听
那么一个简单的上拉加载数据页面就OK了~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>上拉加载示例 - DYBOY</title>
<style type="text/stylesheet">
*{
margin:0;
padding:0;
border:0;
}
</style>
</head>
<body>
<div class="gallary" style="width=500px;background-color:#666;"> </div>
<p class="tips" style="width:100%;text-align:center;">上拉加载...</p>
<div class="cover" style="background-color:red;z-index:999;position:fixed;width:100%;height:100vh;top:0;display:none;">
<h1 style="color:#fff;">加载中...</h1>
</div>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 获取数据，追加到网页
function getImages(pageNum){
$(".cover").show();
$.get('https://api.top15.cn/picbed/piclist.php?page='+pageNum, function(data, status){
if(data) {
var data = JSON.parse(data);
$.each(data.data, function(index, obj) {
$('.gallary').append('<img src="'+obj[0]+'" style="height:300px;margin:15px;" title="'+ obj[1]+'" />');
});
$(".cover").hide();
} else {
$(".cover").hide();
}
});
}
$(function(){
// 加载第一次的数据
getImages(0);
// 全局统计页数
var PageNum = 1;
var timer = null;
// 监听滚动条变化
$(window).scroll(function(){
clearTimeout(timer);
timer = setTimeout(function(){
if(document.documentElement.scrollTop + document.documentElement.clientHeight + 500 > document.documentElement.scrollHeight ) {
// 还有300px距离可滚动的时候触发
if(PageNum >= 5) {
// 数据加载完毕
$('.tips').text('没有更多了~');
return;
}else {
getImages(PageNum++);
}
}
}, 1000);
});
});
</script>
</body>
</html>
下一篇
C++基础问题整理
C++基础问题整理
版权声明：《 浏览器中的几个高度 》为DYBOY原创文章，转载请注明出处！
最后编辑:2019-7-14 11:07:38
2020-04-14 01:40