<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置视窗大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 按照ie版本渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 双内核浏览器按照极速模式(谷歌内核)渲染 -->
<meta name="renderer" content="webkit">
<title>bootstrap</title>
<!-- <link rel="stylesheet" href="../dist/css/bootstrap.css"> -->
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style>
.sec {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh / 3);
font-size: 80px;
box-shadow: 50px 50px 100px 20px rgba(0, 0, 0, .6) inset,
-50px -50px 100px 20px rgba(0, 0, 0, .6) inset,
50px -50px 100px 20px rgba(0, 0, 0, .6) inset,
-50px 50px 100px 20px rgba(0, 0, 0, .6) inset,
2px 2px 5px #fff;
text-shadow: 3px 3px 3px #fff,
3px 3px 3px #ccc;
background-image: radial-gradient(circle, rgba(0, 0, 255, .8), rgba(255, 0, 0, .5), rgba(0, 255, 0, .6), rgba(255, 255, 0, .6));
}
.sec span {
color: #000;
-webkit-box-reflect: below -45px -webkit-linear-gradient(top, transparent 50%, rgba(0, 0, 0, .6));
}
.rotate {
animation: rotate 1s linear infinite;
}
.zoomIn {
animation: scale .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes scale {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.alert {
margin: 0;
}
</style>
</head>
<body>
<div class="sec"><span class="zoomIn">10</span></div>
<div class="sec"><span class="zoomIn">9</span></div>
<div class="sec"><span class="zoomIn">8</span></div>
<div class="sec"><span class="zoomIn">7</span></div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- <script src="../dist/js/jquery-2.1.0.js"></script>
<script src="../dist/js/bootstrap.js"></script> -->
<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();
}
function addClassSpan() {
var $lastSpan = $(".sec:last").find("span");
if (!$lastSpan.hasClass("zoomIn")) $lastSpan.addClass("zoomIn");
}
function throttle(callback) {
if (!timer) {
timer = setTimeout(function () {
callback();
timer = false;
}, 500)
}
}
function loadMore() {
if (count <= 0) {
if (noData) {
noData = false;
appendAlert();
}
return false;
}
appendAlert();
throttle(appendSection);
addClassSpan();
}
$(window).on("scroll", function () {
onReachBottom(loadMore)
})
</script>
</body>
</html>