為啥oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto'; 有效果，但是不居中

撤掉margin:0 auto ?結(jié)果會(huì)更加偏左

但加上后，稍微向右移，但不居中

而且顯示6，但實(shí)際只有5列

---------------------css代碼------------------------

*{margin:0;

? padding:0;}

? #main{position:relative;}

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

? float:left;}

? .pic{padding:10px;

? border:1px solid #CCC;

? border-radius:5px;

? box-shadow:0 0 5px #CCC;}

? .pic img{width:165px;

? height:auto;}

---------------------script代碼----------------------

window.onload=function(){

waterfall("main","box");

}

function waterfall(parent,box){

//將mian下的所有class為box的元素取出來(lái)

var oParent=document.getElementById(parent);

var oBoxs=getByClass(oParent,box);

//計(jì)算整個(gè)頁(yè)面顯示的頁(yè)數(shù)（頁(yè)面寬/box的寬）

var oBoxW=oBoxs[0].offsetWidth;

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

//設(shè)置Main的寬

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

console.log("123");

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

}

//根據(jù)Class獲取元素

function getByClass(parent,clsName){

var boxArr=new Array(), //用來(lái)存儲(chǔ)獲取到的class為box的元素

oElements=parent.getElementsByTagName("*");

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

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

boxArr.push(oElements[i]);

}

}

return boxArr;

}

---------------------html代碼-----------------------

window.onload=function(){

waterfall("main","box");

}

function waterfall(parent,box){

//將mian下的所有class為box的元素取出來(lái)

var oParent=document.getElementById(parent);

var oBoxs=getByClass(oParent,box);

//計(jì)算整個(gè)頁(yè)面顯示的頁(yè)數(shù)（頁(yè)面寬/box的寬）

var oBoxW=oBoxs[0].offsetWidth;

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

//設(shè)置Main的寬

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

console.log("123");

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

}

//根據(jù)Class獲取元素

function getByClass(parent,clsName){

var boxArr=new Array(), //用來(lái)存儲(chǔ)獲取到的class為box的元素

oElements=parent.getElementsByTagName("*");

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

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

boxArr.push(oElements[i]);

}

}

return boxArr;

}