照着敲得代码，列数会变 我觉得列数还是会变的啊，老师写的代码列数不会变我也觉得不可能，main的宽度是改变着的，因为列数在改变，除非css对main做了点什么？

照着敲得代码，列数会变

我觉得列数还是会变的啊，老师写的代码列数不会变我也觉得不可能，main的宽度是改变着的，因为列数在改变，除非css对main做了点什么？

window.onload = function(){

waterfall("main","box");

}

function waterfall(parent,box){

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

var oParent = document.getElementById(parent);

var oBox = getByClass(oParent,box);

console.log(oBox.length);

//计算整个页面显示的列数（页面宽度/box宽度）

var oBoxW = oBox[0].offsetWidth;

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

console.log(cols);

//设置main的宽度

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

console.log(oParent.offsetWidth);

}

function getByClass(parent,className){

var boxArr = new Array();

var oElements = parent.getElementsByTagName("*");

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

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

boxArr.push(oElements[i]);

}

}

return boxArr;

}