为什么一加js,css样式的效果就没了
加了js后,css的圆角框,padding之类的都没了
加了js后,css的圆角框,padding之类的都没了
2016-11-05
js部分
window.onload=function(){
waterfall('main','box');
}
//根据class获取元素
function getByClass(parent,clsName)
{
var boxArr=new Array(); //用来存储获取到的所有class为box的元素
oElements=parent.getElementsByTagName("*"); //获取父元素下所有的子元素
for(var i=0;i<oElements.length;i++)
{
if(oElements[i].className=clsName) //找到要找的元素
{
boxArr.push(oElements[i]);
}
}
return boxArr;
}
function getMinhIndex(arr,val)
{
for(var i in arr)
{
if(arr[i]==val)
{
return i;
}
}
}
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;marign:0 auto';
var hArr=[]; //存放每一行高度的数组
for(var i=0;i<oBoxs.length;i++)
{
if(i<cols)
{
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';
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
举报