移动端瀑布流 ajax,ajax 瀑布流 demo(示例代码)

无标题文档

window.οnlοad= function(){varoUl=document.getElementById(‘ul1‘);varaLi=oUl.getElementsByTagName(‘li‘);variLen=aLi.length;varipage= 1;varonOff= true;

getList();functiongetList(){

ajax(‘get‘,‘getPics.php‘,‘cpage=‘+ipage,function(data){vardata=JSON.parse(data);if(!data){return;

}for(vari=0;i

oImg.src=data[i].preview;

oImg.style.width= ‘225px‘;

oImg.style.height=data[i].height*(225 /data[i].width )+ ‘px‘;

oDiv.appendChild(oImg);varoP=document.createElement(‘p‘);

oP.innerHTML=data[i].title;

oDiv.appendChild(oP);

aLi[_index].appendChild(oDiv);

}

onOff= true;

});

}/*拉动滚动条触发*/window.οnscrοll= function(){var_index=getShort();varoLi=aLi[_index];varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;if(getTop(oLi)+oLi.offsetHeight

onOff= false;

ipage++;

getList();

}

}

};/*获取元素top*/

functiongetTop(obj){variTop= 0;while(obj){

iTop+=obj.offsetTop;

obj=obj.offsetParent;

}returniTop;

}/*获取页面li的最短高度*/

functiongetShort(){varindex= 0;varih=aLi[index].offsetHeight;for(vari=1;iaLi[i].offsetHeight){

index=i;

ih=aLi[index].offsetHeight;

}

}returnindex;

}

};