瀑布流
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul li {height: 50px; border: 1px solid red;}
</style>
<script type="text/javascript" src="jquery1.8.2.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
<script type="text/javascript">
$(window).load(function(){
;(function($){
var is_do = true;
var range = 50; //距下边界长度/单位px
var maxnum = parseInt(10); //设置加载最多次数-页数
var num = 1; //当前页数
var totalheight = 0;
$(window).scroll(function(){
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
var window_height = $(window).height();//浏览器窗体高度
var document_height = $(document).height();//文档高度
//浏览器窗体高度 + 滚动条距顶部距离 = 文档高度
console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
console.log("页面的文档高度 ："+$(document).height());
console.log('浏览器的高度：'+$(window).height());
totalheight = parseFloat(window_height) + parseFloat(srollPos);
if ((document_height-range <= totalheight) && (num < maxnum) && is_do) {
is_do = false;
alert(1);
}
});
})(jQuery);
});
</script>
</html>