css和html能一起存在吗,我是将css,js和html都写在一起的，请大神帮我看看为什么实现不了功能呢？...

源自：2-4 JavaScript实现瀑布流布局中图片排序

我是将css,js和html都写在一起的，请大神帮我看看为什么实现不了功能呢？

瀑布流布局

*{ margin:0;

padding:0;}

#main{  position:relative;}

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

}

.pic{  padding:10px;

border:1px solid #CCC;

border-radius:5px;

box-shadow:0 0 5px #CCC;

float:left;

}

.pic img{  width:165px;

height:auto}

window.onload = function(){

waterfall('main','box');

}

function waterfall(parent,box){

//将main下的所有class为box的元素取出来

var oParent = document.getElementById(parent);

var oBoxs=getByClass(oParent,box);

//计算整个页面显示的列数(页面宽/box宽)

var oBoxW = oBoxs[0].offsetWidth;

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

//设置main的宽带

oParent.style.cssText = 'width:'+oBoxW*cols+'px;margin:0 auto';

var hArr=[];

for(var i=0;i

{if(i

hArr.push(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';

oBoxa[i].style.left=oBoxs[index].offsetLedt+'px';

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

}

}

}

//根据classs获取元素

function getByClass(parent,clsname){

var boxArr = new Array();//用来存储获取到的所有class为box的元素

oElements = parent.getaElementsByTagName('*');

for(var i=0;i

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

boxArr.push(oElements[i]);

}

}

return boxArr;

}

提问者：qq_YOYO_153384916

2016-10-11 12:54