简单的封装了下，没有检测类型和边界处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" />
<meta name="renderer" content="webkit" />
<title>Document</title>
<style>
.box1 {
width: 100%;
height: 200px;
line-height: 200px;
color: white;
text-align: center;
background-color: teal;
}
.box2 {
width: 100%;
height: 200px;
line-height: 200px;
color: white;
text-align: center;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="list_box"></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 计数器
var num = 0
// 滚动加载标志，防止数据抖动，数据重复加载
var sFlag = true
function listData() {
sFlag = false
var getData = function () {
var str = '<div class="box1">'+(++num)+'</div><div class="box2">'+(++num)+'</div>'
str += '<div class="box1">'+(++num)+'</div><div class="box2">'+(++num)+'</div>'
$('.list_box').append(str)
sFlag = true
}
setTimeout(getData, 1000)
}
listData()
scroll_more(listData, 50)
function scroll_more(callback, bottom, option) {
// 参数处理，Number 类型
bottom = (bottom && Number(bottom)) || 0
// 回调函数的参数，Object 类型
option = option || ''
var handle = function () {
//滚动条距离顶部的高度
var scrollTop = $(this).scrollTop()
//当前页面的总高度
var scrollHeight = $(document).height()
//当前可视的页面高度 ，可能不兼容，调试别的浏览器修改这个参数即可
var windowHeight = $(this).height()
// 最好给 bottom 一个值，不要刚刚好
if (scrollTop + windowHeight + bottom >= scrollHeight) {
if (sFlag) {
//加载数据
callback(option)
}
}
}
//绑定到窗口滚动上
$(window).scroll(handle)
}
</script>
</body>
</html>
