问答详情
源自:3-1 jQuery实现瀑布流布局图片定位

求问:js瀑布流布局新增的与原先的图片出现了重叠,是哪里出现了问题?应该怎么解决?

window.onload = function(){

waterfall("main","box");

var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},

{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'},

{"src":'6.jpg'},{"src":'7.jpg'},{"src":'8.jpg'},

{"src":'9.jpg'},{"src":'10.jpg'},{"src":'11.jpg'},]}

window.onscroll=function(){

if (checkScrollSlide) {

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

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);

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

oImg.src=dataInt.data[i].src;

oPic.appendChild(oImg);

}

}

}

}

function checkScrollSlide(){

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

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

var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+

Math.floor(oBoxs[length-1].height/2);

var scrollTop = document.body.scrollTop || 

document.documentElement.scrollTop;

var height = document.body.clientHeight ||

document.documentElement.clientHeight;

return (lastBoxH<scrollTop+height)?true:false;

}

function waterfall(parent,content){

var oParent = document.getElementById(parent);

var oBoxs = getByClass(oParent,content);

var oBoxw = oBoxs[0].offsetWidth;

var cols=Math.floor(

document.documentElement.clientWidth/oBoxw);

oParent.style.cssText="width:"+oBoxw*cols+"px;margin:0 auto";

var hArr = new Array;

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

if(i<cols){

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

}else{

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

var index=getMinHindex(hArr,minH);

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

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

oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";

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

}

}


}

function getMinHindex(arr,val){

for(var i in arr){

if (arr[i]==val) {

return i;

}

}

}

function getByClass(parent,clname){

var boxArr = new Array;

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

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

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

boxArr.push(oElements[i]);

}

}

return boxArr;

}


提问者:aladdinx 2016-04-21 16:42

个回答

  • yiduoxiangyanghua
    2016-04-21 17:30:29
    已采纳

    waterfall("main","box");需要在if (checkScrollSlide)里面再执行一次