<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
li{
width: 100%;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul id="list">
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
<li>A5</li>
<li>A6</li>
<li>A7</li>
<li>A8</li>
<li>A9</li>
<li>A10</li>
<li>A11</li>
<li>A12</li>
<li id="more">more</li>
</ul>
<script type="text/javascript">
var oList =document.getElementById('list');
var oMore =document.getElementById('more');
function offsetPos(aDom){
var t =aDom.offsetTop;
var l =aDom.offsetLeft;
var oParent =aDom.offsetParent;
while(oParent){
t+=oParent.offsetTop;
l +=oParent.offsetLeft;
oParent =oParent.offsetParent;
}
return[t,l];
}
window.onscroll =function(){
var scrollHeight =document.body.scrollTop ||document.documentElement.scrollTop;
var winHeight =document.documentElement.clientHeight;
if(scrollHeight+winHeight>=offsetPos(oMore)[0]){
var node =null;
for(var i=0;i<10;i++){
node=document.createElement('li');
node.innerHTML='B'+(i+1);
oList.insertBefore(node,oMore);
}
}
}
</script>
</body>
</html>
