练习写瀑布布局中，需要获取各个盒子的高度来计算下一个盒子放到何处。

html：

<p id="main">
    <p class="box">
        <p class="pic"><img src="img/P_02.jpg" alt=""></p>
    </p>
    <p class="box">
        <p class="pic"><img src="img/P_03.jpg" alt=""></p>
    </p>
</p>

css：

.box {
    padding:15px 0 0 15px;
    float: left;
}
.pic {
    padding: 10px;
    border:1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    border-radius:5px;
}
.pic img {
    width: 165px;
}

js：

function waterFall(parent,box) {
    //取出main下所有class为box的元素
    var oParent = document.getElementById(parent);
    var boxs = getByClass(oParent, box);
    //计算整个页面显示的列数
    var oBoxW = boxs[0].offsetWidth;
    var clos = Math.floor(document.documentElement.clientWidth / oBoxW);
    //设置main的宽
    oParent.style.cssText = 'width:'+oBoxW*clos+'px;margin:0 auto;'
    var hArr = [];
    for (var o = 0;o<boxs.length;o++) {
        if(o<clos) {
            hArr.push(boxs[o].offsetHeight);
        }
    }
    console.log(hArr)//这里console出来的值不对，每张图片长度都不一样，但是chrome中除了第一个可以出正确的值，其余都是55；在ie11中console的值却正常；
}

诉求：
这里offsetwidth获取的值在chrome中不正常，影响到了接下里的学习，所以我想问下大伙，你们都用什么尺寸的显示器？一般是双屏还是单屏生产？