用ajax写瀑布流,ajax 瀑布流实现

无标题文档

margin:0px;

padding:0px;

}

ul{

width:1080px;

margin: 100px auto0;

}

li{

width:248px;float:left;

border:1px solid pink;

list-style:none;

margin-right:10px;

}

li div {

border: 1px solid #000;

padding: 10px;

margin-bottom: 10px;

}

li div img {

width: 225px;

display: block;

}

window.οnlοad= function()

{var oul = document.getElementById(‘ul1‘);var ali = oul.getElementsByTagName(‘li‘);var b = true;var ipage = 1;

getlist();functiongetlist()

{

ajax(‘get‘,‘ajax pbl.php‘,‘cpage=‘+ipage,function(data)

{var data =JSON.parse(data);if(!(data.length))

{return;

}for(var i = 0; i < data.length; i++)

{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.οnscrοll= function()

{var _index =getshort();var oli =ali[_index];var scrollTop = document.body.scrollTop ||document.documentElement.scrollTop;if(gettop(oli)+oli.offsetHeight < document.documentElement.clientHeight +scrollTop)

{if(b)

{

b= false;

ipage++;

getlist();

}

}

}functiongetshort()

{var index = 0;var ih =ali[index].offsetHeight;for(var i = 1; i < ali.length; i++)

{if(ali[i].offsetHeight

{

index=i;

ih=ali[index].offsetHeight;

}

}returnindex;

}functiongettop(obj)

{var itop = 0;while(obj)

{

itop+=obj.offsetTop;

obj=obj.offsetParent;

}returnitop;

}functionajax(method,url,data,success)

{var xhr = null;try{

xhr= newXMLHttpRequest();

}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);

}

}

}

}

}