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：
时间： 2024-10-05 05:07:34