为啥oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto'; 有效果,但不居中
为啥oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto'; 有效果,但是不居中
撤掉margin:0 auto 结果会更加偏左
但加上后,稍微向右移,但不居中
而且显示6,但实际只有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的元素取出来
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";//margin:0 auto
console.log("123");
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
}
//根据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;
}
---------------------html代码-----------------------
window.onload=function(){
waterfall("main","box");
}
function waterfall(parent,box){
//将mian下的所有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";//margin:0 auto
console.log("123");
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
}
//根据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;
}