*{
margin: 0;
padding: 0;
}
div{
width: 1200px;
margin: 0 auto;
}
ul{
float: left;
list-style: none;
width: 200px;
margin:0 20px;
}
<div>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
window.οnlοad=function () {
var oUl=document.getElementsByTagName("ul");
var usf=0,bodyHeight=1000;//从getPics中调用json为utp返回,并执行方法
myajax("get","getPics.php","cpage=1",function (utp) {
//将传回的文本转换成json
var json=JSON.parse(utp);
//遍历整个json
for (tk in json){
//判断浏览器所有内容高度小于设定的值,当超出时跳出循环
if (document.documentElement.scrollHeight<bodyHeight){
//新建一个li并新建一个img
var oLi=document.createElement("li");
var imgesP=document.createElement("img");
//给img赋值
imgesP.src=json[tk].image;
imgesP.style.width="200px";
//根据宽度更改高度
imgesP.style.height=(200/json[tk].width)*json[tk].height+"px";
imgesP.style.padding="5px 10px 5px 10px";
imgesP.style.backgroundColor="aqua";
imgesP.id=json[tk].id;
//获取最短的ul的索引值
var jishu=memin(0,oUl);
//将img添加进li
oLi.appendChild(imgesP);
//将li添加进最短的ul
oUl[jishu].appendChild(oLi);
//统计图片次数增加
usf++;
}else {
break;
}
}
});
//设置一个方法用于判断,传入数组的最小值并返回
function memin(min,objkt) {
for ( i=1;i<objkt.length;i++){
if (objkt[min].offsetHeight>objkt[i].offsetHeight){
min=i;
}
}
return min;
}
//设置一个方法用于判断,传入数组的最大值并返回
function memax(max,objkt){
for ( i=1;i<objkt.length;i++){
if (objkt[max].offsetHeight<objkt[i].offsetHeight){
max=i;
}
}
return max;
}
//判断滚动条滚动事件
window.οnscrοll=function () {
//获取浏览器滚动的高度和屏幕所占高度
var bodySc=document.documentElement.scrollTop;
var bodyChe=document.documentElement.clientHeight;
//判断滚动高度加屏幕高度如果大于设定的高度,进入判断
if (bodyChe+bodySc>bodyHeight){
//给设定的高度增加500
bodyHeight+=500;
//调用ajax,返回json文本
myajax("get","getPics.php","cpage=1",function (utp) {
//将文本装换为json
var json=JSON.parse(utp);
//设置while循环,当页面所占高度小于设定高度,循环
while (document.documentElement.scrollHeight<bodyHeight){
//判断打印的图片是否超出json所带图片个数,如果超出强制跳出循环
if (usf>=json.length)
break;
//创建一个li和一个img
var oLi=document.createElement("li");
var imgesP=document.createElement("img");
//给img赋值
imgesP.src=json[usf].image;
imgesP.style.width="200px";
//根据宽度,计算比例,算出高度的值并赋予
imgesP.style.height=(200/json[usf].width)*json[usf].height+"px";
imgesP.style.padding="5px 10px 5px 10px";
imgesP.style.backgroundColor="aqua";
imgesP.id=json[usf].id;
//获取最短的ul的索引值
var jishu=memin(0,oUl);
//将img添加进li
oLi.appendChild(imgesP);
//将li添加进最短的ul
oUl[jishu].appendChild(oLi);
//记录添加图片的总数加一
usf++;
}
//判断usf是否大于json传入
if (usf==json.length){
//创建一个新的p标签
var p=document.createElement("p");
//给新建的p赋值
p.innerText="后面没有了哦";
p.style.width="1200px";
p.style.height="50px";
p.style.textAlign="center";
//获取ul中高度最大ul的索引值
var jishu=memax(0,oUl);
//给p添加内边距,使其在最底部
p.style.paddingTop=oUl[jishu].offsetHeight+50+"px";
//给最外层的div添加这个p
document.getElementsByTagName("div")[0].appendChild(p);
//给usf加一,使这个判断不在被执行,反正反复添加
usf++;
}
});
}
}
}