瀑布流實現
window.onload?=?function(){
imgLocation('container',?'box');
window.onscroll?=?function(){
var?imgData?=?{
"data":[
{"src"?:?"1.jpg"},
{"src"?:?"2.jpg"},
{"src"?:?"3.jpg"},
{"src"?:?"4.jpg"},
{"src"?:?"5.jpg"},
{"src"?:?"6.jpg"}
]
};
if(checkFlag()){
var?oParent?=?$('container');
for(var?i?=?0;?i?<?imgData.data.length;?i++){
var?createdBox?=?document.createElement('div');
createdBox.className?=?'box';
oParent.appendChild(createdBox);
var?imgBox?=?document.createElement('div');
imgBox.className?=?'box_img';
createdBox.appendChild(imgBox);
var?img?=?document.createElement('img');
img.src?=?'img/'?+?imgData.data[i].src;
imgBox.appendChild(img);
}
}
imgLocation('container',?'box');
};
};
/**
判斷何時滾動加載
*/
function?checkFlag(){
var?oParent?=?$('container');
var?oBoxs?=?getByClass(oParent,?'box');
var?lastBoxDistance?=?oBoxs[oBoxs.length?-?1].offsetTop;
var?scrollTop?=?document.documentElement.scrollTop?||?document.body.scrollTop;
var?viewportHeight?=?document.documentElement.clientHeight?||?document.body.clientHeight;
if(lastBoxDistance?<?(scrollTop?+?viewportHeight)){
return?true;
}
}
function?imgLocation(parent,?childClsName){
var?oParent?=?$(parent);
var?oBoxs?=?getByClass(oParent,?childClsName);
//console.log(oBoxs);
var?imgWidth?=?oBoxs[0].offsetWidth;
var?cols?=?Math.floor(document.documentElement.clientWidth?/?imgWidth);
oParent.style.cssText?=?"width:"?+?imgWidth?*?cols?+?"px;margin:0?auto";
/*第一行盒子的高度集合*/
var?boxHeightArr?=?[];
for(var?i?=?0;?i?<?oBoxs.length;?i++){
if(i?<?cols){
boxHeightArr[i]?=?oBoxs[i].offsetHeight;?
}else{
//第一行中最小高度的值
var?minHeight?=?Math.min.apply(null,??boxHeightArr);
console.log(minHeight);
var?indexOfMinHeight?=?getMinHeightIndex(boxHeightArr,?minHeight);
console.log(indexOfMinHeight);
oBoxs[i].style.position?=?'absolute';
oBoxs[i].style.top?=?minHeight?+?'px';
oBoxs[i].style.left?=?oBoxs[indexOfMinHeight].offsetLeft?+?'px';
//更新高度
boxHeightArr[indexOfMinHeight]?=?boxHeightArr[indexOfMinHeight]?+?oBoxs[i].offsetHeight;
}
}
}
function?getMinHeightIndex(boxHeightArr,?minHeight){
for(var?height?in?boxHeightArr){
if(boxHeightArr[height]?==?minHeight){
return?height;
}
}
}
function?getByClass(parent,?childClsName){
var?resultArr?=?[],
? allElements?=?parent.getElementsByTagName('*'),
? i?=?0;
for(i?=?0;?i?<?allElements.length;?i++){
if(allElements[i].className?==?childClsName){
resultArr.push(allElements[i]);
}
}
return?resultArr;
}
function?$(id){
return?document.getElementById(id);
}不錯。。。。
2015-04-12
我想問如果數組里面的圖片都加載了一次要怎么停止呢,不想無限加載