<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.imglist{width: 100%;height: auto;position: relative;}
.imglist ul{padding:0px;margin:0px auto;position: relative;}
.imglist ul li{width: 220px;border:1px solid #ccc;padding: 5px;float: left;list-style: none;position: absolute;}
.imglist ul li img{width: 100%;vertical-align: middle;}
.more{position: absolute;display: block;width: 100px;height:30px;padding: 5px 10px;background-color: #efefef;color:#333;left: 0px;right:0px;margin: 0px auto;border:none;border-radius: 4px;}
</style>
</head>
<body>
<div class="imglist">
<ul id="list">
</ul>
<button class="more" type="button" style="cursor: pointer;">更多</button>
</div>
<script>
var loadingfun = {
//窗口改变重新排版
changesize: function(){
var rowheightagain = this.againsize();
var moverheight =maxheight(rowheightagain);
var more = document.getElementsByClassName("more")[0];
more.style.top = moverheight+"px"; //更多按钮的位置（根据最高列的高度来觉得）
//获取最高列的高度
function maxheight(arraymode){
var maxval = 0;
for(var keys in arraymode){
if(arraymode[keys]>maxval){
maxval = arraymode[keys];
}
}
return maxval;
}
},
loadingimg:function(){
var numimg = 10,
fristnum = 10;//初始加载数据条数
//初始排版
(function ajaximg(){
var litagarray =null,
lilength =null,
liwidth=null,
litagheigh =[],//各个li模块的高度
rowheight =[],//各个列的高度
row=null,
objectresult ="",
ullist = null,
more = document.getElementsByClassName('more')[0];
if(window.XMLHttpRequest){
xmlhttp =new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject('Micrsot.XMLHTTP');
}
(function readyajax(){
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status==200&&xmlhttp.readyState==4){
var resultdata = eval('('+xmlhttp.responseText+')'),
_htmlallli = '',
indexnum=0;
ullist = document.getElementById('list');
objectresult = resultdata.imgdata;
datalength = objectresult.length;
/*****获取li*****/
/**缓存图片并插入，一定要先缓存不然计算不到LI的真是高度**/
(function imgload(){
var imagesload = new Image();//实例化图片缓存函数
imagesload.onload = function(){
//如果缓存完图片则获取li并插入
if(indexnum==fristnum){
for(var i=0;i<fristnum;i++){
var _htmlli = "<li><a href=''><img src="+objectresult[i].urlimg+" /></a></li>";
_htmlallli +=_htmlli;
}
/***插入li****/
addhtml(_htmlallli,ullist);
/**定义列数**/
litagarray = ullist.getElementsByTagName('li');//获取li集合
lilength = litagarray.length;//获取li的个数
liwidth = litagarray[0].offsetWidth;//获取li宽度
documentwidth = document.documentElement.offsetWidth;//页面宽度；
row = Math.floor(documentwidth/liwidth);
ullist.style.width = row*liwidth+'px';
/**列数定义完成**/
//获取各个模块的高度
for(var i=0;i<lilength;i++){
litagheigh.push(litagarray[i].offsetHeight);
}
/**初始化第一列的各模块的top与left并获取列的高度**/
for(var i=0;i<row;i++){
litagarray[i].style.top = 0+'px';
litagarray[i].style.left = liwidth*i+'px';
rowheight.push(litagarray[i].offsetHeight);
}
/**插入新的模块，从最短一列开始插入，并更新该列的高度**/
for(var i=row;i<fristnum;i++){
var minindex = minheight(rowheight);//获取最短列的索引
litagarray[i].style.top = rowheight[minindex] +'px';//设置模块的top
litagarray[i].style.left = liwidth*minindex+'px';//设置模块的left
rowheight[minindex] = litagheigh[i]+rowheight[minindex];//更新最短列的高度
}
var thistop = maxheight(rowheight);
more.style.top = thistop +'px';
}else{
imgload()//没有缓存完则继续缓存
}
}
imagesload.src = objectresult[indexnum].urlimg;//缓存图片
indexnum++;
})()
}
}
xmlhttp.open('POST','imgdata.php');
xmlhttp.setRequestHeader("Content-type","application/json;charset=utf-8");
xmlhttp.send(null);
})()
//点击更多后加载
more.onclick = function(){
var indexnumtwo = fristnum;
(function imageloading(){
var imagesloadtwo = new Image();//实例化图片缓存函数
imagesloadtwo.onload = function(){
if(indexnumtwo==numimg+fristnum){
var _htmlalli = '';
var rowheightagain = loadingfun.againsize();//这里调用这个主要是在窗口改变的后，再去加载模块需要重新计算列数及列的高度,
//判断是否全部已经加载(显示的数据=剩余的数据刚好相等，显示的数据>与剩余的数据，所以遍历的时候要判断i是否超出剩余条数)
if(datalength>fristnum){
for(var i=fristnum;i<numimg+fristnum;i++){
//如果全部显示完则停止遍历跳出循环;
if(i>=datalength){
break;
}
var _htmlli = "<li><a href=''><img src="+objectresult[i].urlimg+" /></a></li>";
_htmlalli +=_htmlli;
}
fristnum = numimg+fristnum;
var testul = ullist;
addhtml(_htmlalli,ullist);
var newlitaglength = litagarray.length;
for(var i=lilength;i<newlitaglength;i++){
litagheigh.push(litagarray[i].offsetHeight);//新加载数据个模块的高度;
}
//插入加载的数据并更新更列的高度与前面的插入一样;
for(var i=lilength;i<newlitaglength;i++){
var minkey = minheight(rowheightagain);
litagarray[i].style.top = rowheightagain[minkey]+'px';
litagarray[i].style.left = minkey*liwidth +'px';
rowheightagain[minkey] +=litagheigh[i];
}
lilength = newlitaglength;
var thistop = maxheight(rowheightagain);
more.style.top = thistop +'px';
}else{
alerts('没有更多了');//如果点击时已经加载完，则弹出
}
}else{
imageloading();
}
}
if(!objectresult[indexnumtwo]){
imagesloadtwo.src="img/11.jpg";//无视这个，但是一定要有一个值;
}else{
imagesloadtwo.src = objectresult[indexnumtwo].urlimg;//缓存图片
}
indexnumtwo++;
})();
}
})();
//获取最短列的索引
function minheight(arraymode){
var minval = arraymode[0];
var minkey = 0;
for(var keys in arraymode){
if(minval>arraymode[keys]){
minval = arraymode[keys];
minkey = keys;
}
}
return minkey;
}
//获取最高列的的值
function maxheight(arraymode){
var maxval = 0;
for(var keys in arraymode){
if(arraymode[keys]>maxval){
maxval = arraymode[keys];
}
}
return maxval;
}
//插入html
function addhtml(elementhtml,elementenode){
var newdiv = document.createElement('div');
newdiv.innerHTML = elementhtml;
takehtml = document.createDocumentFragment();//创建一个虚拟的碎片html片段
while(newdiv.firstChild){
takehtml.appendChild(newdiv.firstChild);//取出div中子元素节点，这里有个有意思的地方就是takehtml每插入一个firstchild,div中便少一个；所以takeli中插入的永远是div的第一个
}
return elementenode.appendChild(takehtml);
}
//弹出提示信息
function alerts(texts){
var alerttext = "<p id='alerttext' style='text-align:center;line-height:80px;position:fixed;left:0px;right:0px;margin:40% auto;z-index:1000;width:200px;height:80px;border-radius:8px;background-color:#000;color:#fff;opacity:0.8;'>"+texts+"</p>"
var divalter = document.createElement('div');
divalter.innerHTML = alerttext;
var alterremove = document.getElementById('alerttext');
var takediv = document.createDocumentFragment();
takediv.appendChild(divalter.firstChild);
if(!alterremove){//判断是否弹出了信息，没有则显示；
document.body.appendChild(takediv);
alterremove = document.getElementById('alerttext');
setTimeout(function(){
document.body.removeChild(alterremove);
},2000)
}
}
},
againsize:function(){
var documentwidthagain = document.documentElement.offsetWidth,//页面宽度
ullistagain = document.getElementById('list'),
litagarrayagain = ullistagain.getElementsByTagName('li'),//获取li集合
lilengthagain = litagarrayagain.length,//获取li的个数
liwidthagain = litagarrayagain[0].offsetWidth,//获取li宽度
litagheighagain= [],
rowagain = Math.floor(documentwidthagain/liwidthagain),//获取列数
rowheightagain = [],
result=[documentwidthagain,rowheightagain];
ullistagain.style.width = rowagain*liwidthagain+'px';//定义ul的宽度(居中时使用)
//定位出定义行并获取各列的高度
for(var i=0;i<rowagain;i++){
litagarrayagain[i].style.top = 0+"px";
litagarrayagain[i].style.left = liwidthagain*i+"px";
litagheighagain.push(litagarrayagain[i].offsetHeight);
rowheightagain.push(litagheighagain[i]);
}
//插入剩余的模块（根据最短列来插入）并更新个列的高度
for(var i=rowagain;i<lilengthagain;i++){
litagheighagain.push(litagarrayagain[i].offsetHeight);
var minindex = minheight(rowheightagain);
litagarrayagain[i].style.top = rowheightagain[minindex]+"px";
litagarrayagain[i].style.left = liwidthagain*minindex+"px";
rowheightagain[minindex] +=litagheighagain[i];
}
//获取最短列的索引
function minheight(arraymode){
var minval = arraymode[0];
var minkey = 0;
for(var keys in arraymode){
if(minval>arraymode[keys]){
minval = arraymode[keys];
minkey = keys;
}
}
return minkey;
}
return rowheightagain;//返回各列的高度（其他函数使用）
}
}
window.onload =function(){
loadingfun.loadingimg();
}
window.onresize = function(){
loadingfun.changesize();
}
</script>
</body>
</html>
后台php部分，这里只用到了urlimg，没有用到title
<?php
header("Content-Type:application/json;charset=utf-8");
echo("{'imgdata':[
{'urlimg':'imgdata/1.png','title':'图片一'},
{'urlimg':'imgdata/2.png','title':'图片二'},
{'urlimg':'imgdata/3.png','title':'图片三'},
{'urlimg':'imgdata/4.png','title':'图片四'},
{'urlimg':'imgdata/5.png','title':'图片五'},
{'urlimg':'imgdata/6.png','title':'图片六'},
{'urlimg':'imgdata/7.png','title':'图片七'},
{'urlimg':'imgdata/8.png','title':'图片八'},
{'urlimg':'imgdata/9.png','title':'图片九'},
{'urlimg':'imgdata/10.png','title':'图片十'},
{'urlimg':'imgdata/11.png','title':'图片十一'},
{'urlimg':'imgdata/12.png','title':'图片十二'},
{'urlimg':'imgdata/13.png','title':'图片十三'},
{'urlimg':'imgdata/14.png','title':'图片十四'},
{'urlimg':'imgdata/15.png','title':'图片十五'},
{'urlimg':'imgdata/16.png','title':'图片十六'},
{'urlimg':'imgdata/17.png','title':'图片十七'},
{'urlimg':'imgdata/18.png','title':'图片十八'},
{'urlimg':'imgdata/19.png','title':'图片十九'},
{'urlimg':'imgdata/18.png','title':'图片十八'},
{'urlimg':'imgdata/1.png','title':'图片一'},
{'urlimg':'imgdata/2.png','title':'图片二'},
{'urlimg':'imgdata/3.png','title':'图片三'},
{'urlimg':'imgdata/4.png','title':'图片四'},
{'urlimg':'imgdata/5.png','title':'图片五'},
{'urlimg':'imgdata/6.png','title':'图片六'},
{'urlimg':'imgdata/7.png','title':'图片七'},
{'urlimg':'imgdata/8.png','title':'图片八'},
{'urlimg':'imgdata/9.png','title':'图片九'},
{'urlimg':'imgdata/10.png','title':'图片十'},
{'urlimg':'imgdata/11.png','title':'图片十一'},
{'urlimg':'imgdata/12.png','title':'图片十二'},
{'urlimg':'imgdata/13.png','title':'图片十三'},
{'urlimg':'imgdata/14.png','title':'图片十四'},
{'urlimg':'imgdata/15.png','title':'图片十五'},
{'urlimg':'imgdata/16.png','title':'图片十六'},
{'urlimg':'imgdata/17.png','title':'图片十七'},
{'urlimg':'imgdata/18.png','title':'图片十八'},
{'urlimg':'imgdata/19.png','title':'图片十九'},
{'urlimg':'imgdata/18.png','title':'图片十八'},
{'urlimg':'imgdata/18.png','title':'图片十八'},
{'urlimg':'imgdata/19.png','title':'图片十九'},
{'urlimg':'imgdata/18.png','title':'图片十八'}
]}");
?>
实现效果是这样的，http://www.caicai5.com/sheji/ 当然实际情况是要稍加修改的，比如图片间要有间隙，图片加载要有一个提示信息。根据自己的需要修改即可
来源：https://www.cnblogs.com/liangxiblog/p/6249655.html