第12行 为什么我在setTimeout里面创建class为loading的div,不会跟着在后面显示，而在最顶显示？

window.onload=function(){

waterfall('main','box');

var dataInt={"data":[{"src":"24.jpg"},{"src":"25.jpg"},{"src":"26.jpg"},{"src":"27.jpg"},{"src":"28.jpg"}]}

window.onscroll=function(){

if(checkScrollSlide()){

var oParent=document.getElementById('main');

var oBoxs=getByClass(oParent,'box');

setTimeout(function(){

var oLoading=document.createElement('div');

oLoading.innerHTML='Loading';

oLoading.style.width="100%";

oLoading.style.height="10px";

oLoading.style.background="red";

oLoading.style.position="absolute";

oParent.appendChild(oLoading);

},1000);

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

var oBox=document.createElement('div');

oBox.className='box';

oParent.appendChild(oBox);

var oPic=document.createElement('div');

oPic.className='pic';

oBox.appendChild(oPic);

oBoxs.push(oBox);

var oImg=document.createElement('img');

oImg.src="images/"+dataInt.data[i].src;

oPic.appendChild(oImg);

//将数据块渲染到页面的尾部

}

window.onscroll=null;

waterfall('main','box');

}

}

}

function waterfall(parent,box){

//将main下的所有class 为box 的元素取出来

var oParent=document.getElementById('main');

var oBoxs=getByClass(oParent,box);

//计算整个页面显示的列数（页面宽/box宽度）

var oBoxW=oBoxs[0].offsetWidth;

var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

//设置main的宽

oParent.style.cssText='width:'+oBoxW*cols+'px;'+'margin:0 auto;';

var hArr=[];

for(var i=0;i<oBoxs.length;i++){

if(i<cols){

hArr.push(oBoxs[i].offsetHeight)

}else{

var minH=Math.min.apply(null,hArr);

var index=getMinIndex(hArr,minH);

oBoxs[i].style.position='absolute';

oBoxs[i].style.top=minH+'px';

oBoxs[i].style.left=index*oBoxW+'px';

hArr[index]+=oBoxs[i].offsetHeight;

}

}

}

function getMinIndex(arr,val){

for(var i in arr){

if(arr[i]==val){

return i;

}

}

}

function getByClass(parent,cls){

var boxArr=[];

var oElements=parent.getElementsByTagName('*');

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

{

if(oElements[i].className==cls){

boxArr.push(oElements[i]);

}

}

return boxArr;

}

//滚动是否具备加载数据块的条件

function checkScrollSlide(){

var oParent=document.getElementById('main');

var oBoxs=getByClass(oParent,'box');

var lastBoxH=Math.floor((oBoxs[oBoxs.length-1].offsetHeight)/2+oBoxs[oBoxs.length-1].offsetTop);

var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;

var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;

return (scrollTop+clientHeight>lastBoxH)?true:false;

}