问答详情
源自:2-3 JavaScript实现瀑布流布局中图片定位

列数还是会变

照着敲得代码,列数会变 我觉得列数还是会变的啊,老师写的代码列数不会变我也觉得不可能,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;

}


提问者:不完美 2017-03-10 16:25

个回答

  • 斌冰4421289
    2017-03-21 21:45:31

    document.documentElement.clientWidth本来就是获取当前页面的宽度,所以刷新了列数变化了是正常的

  • 不完美
    2017-03-10 16:34:06

    我说的是在刷新的情况下,不刷新列数肯定不会变的