js上拉加载更多
<script>
//全局变量
var count = 7, timer, noData = true;
//判断文档位置
function onReachBottom(callback) {
//文档的高度
var docHeight = $(document).height();
//窗口的高度
var winHeight = $(window).height();
//滚动条滚动的距离
var scrollTop = $(window).scrollTop();
//判断是否到达文档底部
if (docHeight - winHeight - scrollTop < 200) {
console.log("触底");
callback()
}
}
//添加警示框
function appendAlert() {
//判断警示框是否含有长度
if (!$("#alert").length) {
//判断警告框的内容
var msg = noData ? '<i class="glyphicon glyphicon-refresh rotate"></i>' : '我是有底线的！！！';
//判断警告框的的类名
var alertClass = noData ? "info" : "danger";
//先把警告框存起来
var alert =
'<div id="alert" class="alert fade in alert-' + alertClass + ' text-center">\
'+ msg + '\
<button class="close" data-dismiss="alert">×</button>\
</div>'
//把警告插入到文档中
$('body').append(alert);
}
}
//加数字容器
function appendSection() {
//把需要插入的数字存起来
var sec = '<div class="sec"><span>' + --count + '</span></div>';
//把数字插到文档中
$("body").append(sec);
//把之前插入的警示框移除
$("#alert").remove();
}
//给span标签加类名
function addClassSpan() {
//找出加载出来的span标签
var $lastSpan = $(".sec:last").find("span");
//给span标签加类名
if (!$lastSpan.hasClass("zoomIn")) $lastSpan.addClass("zoomIn");
}
/* //防抖
function debounce(callback) {
clearTimeout(timer);
timer = setTimeout(function () {
callback()
}, 1000)
} */
//节流
function throttle(callback) {
if (!timer) {
timer = setTimeout(function () {
callback();
timer = false;
}, 500)
}
}
//加载更多方法集合
function loadMore() {
//当加载内容的数为0 时停止加载
if (count <= 0) {
if (noData) {
//关闭开关
noData = false;
appendAlert();
// addClassSpan();
// appendSection();
}
//达到条件是关闭函数
return false;
}
appendAlert();
throttle(appendSection);
addClassSpan();
}
//滚动条移动时执行函数
$(window).on("scroll", function () {
onReachBottom(loadMore)
})
</script>
