问答详情
源自:2-7 编程练习

哪个大神可以帮我看下,为什么图片加载不了

/*由于代码是顺序执行的,如果引入的js放在<head>标签里面,

就需要等网页加载完才能执行,否则实现不了想要的js效果*/

window.onload=function(){

waterfall('main','pin');

var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};

window.scroll=function(){


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

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

if (checkscrollside()) {

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

oPin.className='pin';

parent.appendChild(oPin);

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

oBox.className='box';

oPin.appendChild(oBox);

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

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

oBox.appendChild(oImg);


}; 

waterfall('main','pin');

}

}

function waterfall(Oparent,cls){

var parent=document.getElementById(Oparent);//父元素

var pinNum=getByClassname(parent,'pin');//获取在父元素下的pin数量,也就是图片框的数量

var pinW=pinNum[0].offsetWidth;//获取每一个块框pin的宽度

var num=Math.floor(document.documentElement.clientWidth/pinW);//每行能够容纳pin的个数(窗口的宽度/块框的宽度)

parent.style.cssText='width:'+pinW*num+'px;margin:0 auto;';//设置父元素居中,并设置宽度(当浏览器窗口缩小时所容纳的列数不变)

//用于存储 每列中的所有块框相加的高度。

var pinHArr=[];

for(var i=0;i<pinNum.length;i++){//遍历数组pin的每个块状元素

//如果遍历i小于num(6),也就是块状元素pin还处于处于第一行,没有往第二行排列

if (i<num) {

pinHArr[i]=pinNum[i].offsetHeight;//先把第一行的六个pin高度值加入数组

}else{//如果i大于num,也就是块状元素往第二行排列

var minH=Math.min.apply(null,pinHArr);//获取pinHArr数组中的最小值

var minHIndex=pinHArr.indexOf(minH);//获取数组中最小值所在的索引

pinNum[i].style.position='absolute';//设置绝对位移

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

pinNum[i].style.left=pinNum[minHIndex].offsetLeft+'px';

pinHArr[minHIndex]+=pinNum[i].offsetHeight;//更新添加了块状元素的高度

}

}

}

function getByClassname(parent,className){

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

var result=[];

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

if (elements[i].className==className) {

result.push(elements[i]);

}

}

return result;

}

function checkscrollside(){

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

var pinNum=getByClassname(parent,'pin');

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

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

var clientH=document.documentElement.clientHeight;

return (lastPinH<scrollTop+clientH)?true:false;

}



就是dataInt里面的图片加载不了,无法实现瀑布流效果,望解答,谢谢!

提问者:慕粉18144024425 2017-02-11 09:47

个回答

  • 慕粉18144024425
    2017-02-11 10:02:10

    已解决,谢谢