首页 > 代码库 > 瀑布流图片加载
瀑布流图片加载
有个小问题窗口改变的时候会被重新刷新loadingimg函数，请自行修改，
<!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 = function(){
this.loadingimg = function(){
loadingimg();
}
this.changesize = function(){
changesize();
}
function changesize(){
/**重新计算页面宽度并获取列数**/
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 = [];
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 loadingimgsli = new loadingimg();
var minindex = loadingimgsli.minheight(rowheightagain);
litagarrayagain[i].style.top = rowheightagain[minindex]+"px";
litagarrayagain[i].style.left = liwidthagain*minindex+"px";
rowheightagain[minindex] +=litagheighagain[i];
}
/**列数定义完成**/
}
function loadingimg(){
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 = http://www.mamicode.com/eval(‘(‘+xmlhttp.responseText+‘)‘),
_htmlallli = ‘‘,
indexnum=0;
ullist = document.getElementById(‘list‘);
objectresult = resultdata.imgdata;
datalength = objectresult.length;
/*****获取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=http://www.mamicode.com/‘‘>
" +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 = ‘‘;
//判断是否全部已经加载(显示的数据=剩余的数据刚好相等，显示的数据>与剩余的数据，所以遍历的时候要判断i是否超出剩余条数)
if(datalength>fristnum){
for(var i=fristnum;i<numimg+fristnum;i++){
//如果全部显示完则停止遍历跳出循环;
if(i>=datalength){
break;
}
var _htmlli = "<li><a href=http://www.mamicode.com/‘‘>" +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(rowheight);
litagarray[i].style.top = rowheight[minkey]+‘px‘;
litagarray[i].style.left = minkey*liwidth +‘px‘;
rowheight[minkey] +=litagheigh[i];
}
lilength = newlitaglength;
var thistop = maxheight(rowheight);
more.style.top = thistop +‘px‘;
}else{
alerts(‘没有更多了‘);//如果点击时已经加载完，则弹出
}
}else{
imageloading();
}
}
if(!objectresult[indexnumtwo]){
imagesloadtwo.src="img/11.jpg";
}else{
imagesloadtwo.src = objectresult[indexnumtwo].urlimg;//缓存图片
}
indexnumtwo++;
})();
}
})();
this.minheight = function(arraymode){
return minheight(arraymode);
}
//获取最短列的索引
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)
}
}
}
}
window.onload =function(){
loads = new loadingfun();
loads.loadingimg();
}
window.onresize = function(){
loads = new loadingfun()
loads.changesize();
}
</script>
</body>
</html>
瀑布流图片加载
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。