/**
?*
?*?@authors?Your?Name?(you@example.org)
?*?@date????2014-10-16?16:42:50
?*?@version?$Id$
?*/
window.onload?=?function()?{
waterfall();
var?dataInit?=?{
"data":?[{
"src":?"6.jpg"
},?{
"src":?"7.jpg"
},?{
"src":?"8.jpg"
}]
};
//?檢查數(shù)據(jù)是否撐滿頁(yè)面
load();
window.onscroll?=?function()?{
var?flag?=?checkLoadImage();
if?(flag)?{
load();
}
}
}
function?checkShow()?{
var?oParent?=?document.getElementById('main');
var?boxs?=?getByClass(oParent,?'box');
//?取得頁(yè)面高度
var?windowH?=?document.body.clientHeight?||?document.documentElement.clientHeight;
//?最后一個(gè)對(duì)象的高度?+?top?<?windowH?就加載
return?(boxs[boxs.length?-?1].offsetHeight?+?boxs[boxs.length?-?1].offsetTop)?<?windowH???true?:?false;
}
function?load()?{
//?加載
var?main?=?document.getElementById('main');
for?(var?i?=?0;?i?<?dataInit.data.length;?i++)?{
var?box?=?document.createElement('div');
box.className?=?'box';
main.appendChild(box);
var?pic?=?document.createElement('div');
pic.className?=?'pic';
box.appendChild(pic);
var?img?=?document.createElement('img');
img.src?=?"images/"?+?dataInit.data[i].src;
pic.appendChild(img);
}
waterfall();
}
function?checkLoadImage()?{
var?scTop?=?document.body.scrollTop?||?document.documentElement.scrollTop;
var?screenH?=?document.body.clientHeight?||?document.documentElement.clientHeight;
//?取得當(dāng)前列數(shù)
var?oParent?=?document.getElementById('main');
var?oBoxs?=?getByClass(oParent,?'box');
var?hh?=?oBoxs[oBoxs.length?-?1].offsetHeight?+?oBoxs[oBoxs.length?-?1].offsetTop;
var?flag?=?hh?-?20?<?(scTop?+?screenH)???true?:?false;
return?flag;
}
function?waterfall()?{
var?oParent?=?document.getElementById('main');
var?boxs?=?getByClass(oParent,?'box');
var?boxW?=?boxs[0].offsetWidth;
var?clientW?=?document.body.clientWidth?||?document.documentElement.clientWidth;
var?cols?=?Math.floor(clientW?/?boxW);
oParent.style.cssText?=?'width:'?+?boxW?*?cols?+?'px;margin:auto;';
//?行數(shù)組
var?hArr?=?[];
for?(var?i?=?0;?i?<?boxs.length;?i++)?{
if?(i?<?cols)?{
hArr.push(boxs[i].offsetHeight);
}?else?{
var?minH?=?Math.min.apply(null,?hArr);
var?minIndex?=?getIndex(hArr,?minH);
boxs[i].style.cssText?=?'position:absolute;left:'?+?minIndex?*?boxW?+?'px;top:'?+?minH?+?'px;';
hArr[minIndex]?=?minH?+?boxs[i].offsetHeight;
}
}
}
function?getIndex(arr,?value)?{
for?(var?p?in?arr)?{
if?(arr[p]?==?value)?{
return?p;
}
}
}
function?getByClass(parent,?name)?{
var?elements?=?[];
var?list?=?parent.getElementsByTagName('*');
for?(var?i?=?0;?i?<?list.length;?i++)?{
if?(list[i].className?==?name)?{
elements.push(list[i]);
}
}
return?elements;
}<body> <div?id="main"> <div?class="box"> <div?class="pic"> <img?src="images/0.jpg"> </div> </div> <div?class="box"> <div?class="pic"> <img?src="images/1.jpg"> </div> </div> <div?class="box"> <div?class="pic"> <img?src="images/2.jpg"> </div> </div> <div?class="box"> <div?class="pic"> <img?src="images/3.jpg"> </div> </div> </div> </body>
老師你好，我發(fā)現(xiàn)一個(gè)問(wèn)題，我添加了一個(gè)檢查數(shù)據(jù)是否撐滿頁(yè)面load();方法目的是為了在初始化的時(shí)候如果圖片沒(méi)有撐滿就再加載新的圖片，可是發(fā)現(xiàn)模擬的新數(shù)據(jù)加載到頁(yè)面后無(wú)法計(jì)算高度，圖片是后渲染的。
