照着敲得代码,列数会变 我觉得列数还是会变的啊,老师写的代码列数不会变我也觉得不可能,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;
}
document.documentElement.clientWidth本来就是获取当前页面的宽度,所以刷新了列数变化了是正常的
我说的是在刷新的情况下,不刷新列数肯定不会变的