标签：
HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {
margin: 0;
}
#ul1 {
width: 1080px;
margin: 100px auto 0;
}
li {
width: 247px;
list-style: none;
float: left;
margin-right: 10px;
}
li div {
border: 1px solid #000;
padding: 10px;
margin-bottom: 10px;
}
li div img {
width: 225px;
display: block;
}
</style>
<script src="ajax.js"></script>
<script>
window.onload = function () {
var oUl = document.getElementById(‘ul1‘);
var aLi = oUl.getElementsByTagName(‘li‘);
var iLen = aLi.length;
var iPage = 1;
var b = true;
//初始化数据处理
getList();
function getList() {
ajax(‘get‘, ‘getPics.php‘, ‘cpage=‘ + iPage, function (data) {
var data = JSON.parse(data);
if (!data.length) {
//后续没有数据了
return;
}
for (var i = 0; i < data.length; i++) {
//获取高度最短的li
var _index = getShort();
var oDiv = document.createElement(‘div‘);
var oImg = document.createElement(‘img‘);
oImg.src = data[i].preview;
oImg.style.width = ‘225px‘;
oImg.style.height = data[i].height * ( 225 / data[i].width ) + ‘px‘;
oDiv.appendChild(oImg);
var oP = document.createElement(‘p‘);
oP.innerHTML = data[i].title;
oDiv.appendChild(oP);
aLi[_index].appendChild(oDiv);
}
b = true;
});
}
window.onscroll = function () {
var _index = getShort();
var oLi = aLi[_index];
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (getTop(oLi) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop) {
if (b) {
b = false;
iPage++;
getList();
}
}
}
function getShort() {
var index = 0;
var ih = aLi[index].offsetHeight;
for (var i = 1; i < iLen; i++) {
if (aLi[i].offsetHeight < ih) {
index = i;
ih = aLi[i].offsetHeight;
}
}
return index;
}
function getTop(obj) {
var iTop = 0;
while (obj) {
iTop += obj.offsetTop;
obj = obj.offsetParent;
}
return iTop;
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
result：
标签：
原文地址：http://www.cnblogs.com/theWayToAce/p/5543676.html
