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

来源:2-3 JavaScript实现瀑布流布局中图片定位

小明菌

2017-02-19 18:15

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

撤掉margin:0 auto  结果会更加偏左

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

而且显示6,但实际只有5列

http://img.mukewang.com/58a973480001faf519171008.jpg

---------------------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;

}


写回答 关注

2回答

  • maki_S
    2017-02-20 20:38:34
    已采纳

    我看了一遍没看出问题... 你的html代码检查了吗 id名字有没有写错

    小明菌

    换了其它浏览器又正常了

    2017-03-09 22:41:05

    共 1 条回复 >

  • 慕设计6098324
    2017-08-05 15:33:24

    http://img.mukewang.com/598574970001579c14400900.jpg


    一样的问题,为什么啊啊啊啊啊啊 ???

    明明没有padding和margin,右边就是空了一节???

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题