只放了js部分,剛希望多多指出錯(cuò)誤
window.onload=function(){
//實(shí)現(xiàn)瀑布流布局
waterfall('main','box');//調(diào)用
//鼠標(biāo)滾動(dòng)加載圖片
window.onscroll=function (){
if (cheakwillloadnewimage()){
//數(shù)據(jù)
vardataarr=[{src:'20.jpg'},
{src:'20.jpg'},
{src:'22.jpg'},
{src:'23.jpg'},
{src:'24.jpg'},
{src:'25.jpg'},
{src:'26.jpg'},
]
//遍歷數(shù)組,插入新的標(biāo)簽
for (vari=0;i
varnewbox=document.createElement('div')
newbox.className='box';
$('main').appendChild(newbox);
varpics=document.createElement('div');
pics.className='pic';
newbox.appendChild(pics);
varimgs=document.createElement('img');
imgs.src='images/'+dataarr[i].src;
pics.appendChild(imgs);
}
waterfall('main','box');//重新調(diào)用布局
}
}
//函數(shù)
functionwaterfall(parent,box){
//讓父盒子居中
//獲取所有盒子
varallbox= $('main').getElementsByClassName(box);
//獲取盒子寬度
varboxwidth=allbox[0].offsetWidth;
//獲取屏幕寬度
varscreenwidth=document.documentElement.clientWidth;
//算出一共多少列
varrole=parseInt(screenwidth/boxwidth);
//console.log(role);
//居中
$('main').style.width=role*boxwidth+'px';
$('main').style.margin='0 auto';
//子盒子居中
//定義高度數(shù)組
varheightarr=[];
//遍歷數(shù)組
for (vari=0;i
//盒子的高度
varboxheight=allbox[i].offsetHeight;
//console.log(boxheight);
//取出第一行盒子的高度并且放進(jìn)數(shù)組
if (i
heightarr.push(boxheight);
}else{//剩余行
//求出數(shù)組中最矮的盒子高度
varminheight= _.min(heightarr);
//console.log(minheight); 146
//求出最矮盒子對(duì)應(yīng)的下標(biāo)索引
varminboxindex=getMinBoxIndex(heightarr,minheight);
//console.log(minboxindex);
//子盒子定位(定在最小盒子下面)
allbox[i].style.position='absolute';
allbox[i].style.left=minboxindex*boxwidth+'px';
allbox[i].style.top=minheight+'px';
//更新數(shù)組
heightarr[minboxindex]+=boxheight;
}
}
//console.log(heightarr);
}
//求出最矮盒子對(duì)應(yīng)的下標(biāo)
functiongetMinBoxIndex(arr,val){
for (vari=0;i
if (arr[i]==val){
returni;
}
}
}
//判斷是否加載新圖片
//返回值true false
functioncheakwillloadnewimage(){
//獲取最后一個(gè)盒子
varallbox=document.getElementsByClassName('box');
//console.log(allbox.length)
varlastbox=allbox[allbox.length-1];
//計(jì)算最后一個(gè)盒子偏離網(wǎng)頁的距離以及自身高度的一半
varlastboxt=lastbox.offsetHeight*0.5+lastbox.offsetTop;
//console.log(lastboxt);
//求出屏幕高度
varscreenh=document.documentElement.clientHeight||document.body.clientHeight;
//console.log(screenh)
//求出被網(wǎng)頁卷出去的距離
varscrollt=scroll().top;
//console.log(scrollt)
returnlastboxt<=screenh+scrollt;
//console.log(lastboxt, screenh, scrollt);
}
}
