<!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);//把字符串解析成JSON数组
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');
//data是通过AJAX获得得到JSON数据，从审查元素Network->Name->Preview可以查看json数据
oImg.src = data[i].preview;//json数据中图片的地址
oImg.style.width = '225px';//这里的宽度是定死的，不能用data[i].width，宽度固定，高度也要按比例缩放，否则会变形
oImg.style.height = data[i].height * ( 225 / data[i].width ) + 'px';//高度随宽度等比例缩放，225 / data[i].width是宽的比例
oDiv.appendChild( oImg );
var oP = document.createElement('p');
oP.innerHTML = data[i].title;//json数据中图像的标题
oDiv.appendChild( oP );
aLi[_index].appendChild( oDiv );//把创建的div追加到最短的li中
}
b = true;//这一页加载完成，设置成可以下一页加载
});
}
window.onscroll = function() {
var _index = getShort();
var oLi = aLi[_index];
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//当前的top值加上自身的高小于可视区域的高+滚动条的滚动距离
if ( getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {
if ( b ) {
b = false;//这一页正在进行中，防止加载另一页，必须一页页排队来，就像排队取钱，进去把门关上
iPage++;
getList();
}
}
}
//获得最短li，因为数据会优先选择最短的li进行添加图片
function getShort() {
var index = 0;//索引
var ih = aLi[index].offsetHeight;//索引所对应的li列表中的高度值
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>
<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);//把字符串解析成JSON数组
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');
//data是通过AJAX获得得到JSON数据，从审查元素Network->Name->Preview可以查看json数据
oImg.src = data[i].preview;//json数据中图片的地址
oImg.style.width = '225px';//这里的宽度是定死的，不能用data[i].width，宽度固定，高度也要按比例缩放，否则会变形
oImg.style.height = data[i].height * ( 225 / data[i].width ) + 'px';//高度随宽度等比例缩放，225 / data[i].width是宽的比例
oDiv.appendChild( oImg );
var oP = document.createElement('p');
oP.innerHTML = data[i].title;//json数据中图像的标题
oDiv.appendChild( oP );
aLi[_index].appendChild( oDiv );//把创建的div追加到最短的li中
}
b = true;//这一页加载完成，设置成可以下一页加载
});
}
window.onscroll = function() {
var _index = getShort();
var oLi = aLi[_index];
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//当前的top值加上自身的高小于可视区域的高+滚动条的滚动距离
if ( getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {
if ( b ) {
b = false;//这一页正在进行中，防止加载另一页，必须一页页排队来，就像排队取钱，进去把门关上
iPage++;
getList();
}
}
}
//获得最短li，因为数据会优先选择最短的li进行添加图片
function getShort() {
var index = 0;//索引
var ih = aLi[index].offsetHeight;//索引所对应的li列表中的高度值
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>
ajax.js
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
