图片有相同高度的怎么实现瀑布流？

下面这段代码在浏览器上运行正确，但在慕课网上运行有bug,大牛请指点！！！

如果有相同高度的图片怎么改下列，代码实现瀑布流？？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>>

<title>瀑布流布局</title>

*{padding:0;

margin:0;}

#main{position:relative;

}

.box{padding:10px 0 0 10px;

float:left;}

.pic{

padding:5px;

border:1px solid #999;

border-radius:5px;

box-shadow:0 0 5 #999;}

.pic img{width:230px;

height:auto;

}</style>

</head>

window.onload=function(){

waterfall("main","box");

var dataimg={"data":[{"src":"http://pic17.nipic.com/20111025/6957597_163322054332_2.jpg"},

{"src":"http://pica.nipic.com/2007-12-03/2007123141415713_2.jpg"},

{"src":"http://pic4.nipic.com/20090823/3193830_121855091_2.jpg"},

{"src":"http://pic.nipic.com/2008-01-16/200811683222770_2.jpg"},

{"src":"http://pic9.nipic.com/20100904/5041436_154436449375_2.jpg"},

{"src":"http://pic1.nipic.com/2008-12-09/200812912540990_2.jpg"},

{"src":"http://pic19.nipic.com/20120315/4758005_091854125000_2.jpg"},

{"src":"http://pic1a.nipic.com/2008-10-27/200810279545868_2.jpg"},

{"src":"http://pic3.nipic.com/20090525/2416945_231841034_2.jpg"},

{"src":"http://pica.nipic.com/2007-12-03/2007123152823533_2.jpg"}

]}

window.onscroll=function(){

if(scrollposition("main","box")){

oparent=document.getElementById("main");

for(var j=0;j<dataimg.data.length;j++){

var adiv=document.createElement("div"); //添加元素节点

adiv.className='box'; //添加类名 name属性

oparent.appendChild(adiv); //添加子节点

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

oBox.className='pic';

adiv.appendChild(oBox);

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

oImg.src=dataimg.data[j].src;

oBox.appendChild(oImg);

}

waterfall('main','box');

}

function scrollposition(parent,box){

var oBoxs=getByClass(box,parent);

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

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

var mainH=document.documentElement.clientHeight;

if(hp<scrtop+mainH){

return true;

}else{

return false;

}

function waterfall(parent,box){

var oBoxs=getByClass(box,parent);

var mainW=document.documentElement.clientWidth;

var oBoxW=oBoxs[0].offsetWidth;

var clos=Math.floor(document.documentElement.clientWidth/oBoxW);

var oparent=document.getElementById(parent);

oparent.style.cssText='width:'+oBoxW*clos+'px; margin:0 auto;';

var arr=new Array();

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

var oBoxH=oBoxs[i].offsetHeight;

if(i<clos){

arr.push(oBoxs[i].offsetHeight);

}else{

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

var index=getMinHindex(arr,minH);

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

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

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

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

}

function getMinHindex(arr,val){

for(var j=0;j<arr.length;j++){

if(arr[j]<=val){

return j;

}

function getByClass(clsName, parent){

//定义函数getByClass()实现获取document或指定父元素下所有class为on的元素

var oelements;

if(parent){

oelements=document.getElementById(parent).getElementsByTagName("*");

}else{

oelements=document.getElementsByTagName("*");

}

var elearr=new Array();

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

if(oelements[i].className==clsName){

elearr.push(oelements[i]);

}

return elearr;

}

</script>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

大黑虎

浏览 1843回答 1

1回答

点解点解

慕课网不是有相应视频呐！http://www.imooc.com/view/101

0 0

随时随地看视频慕课网APP