请问这种情况怎么解决

我先把浏览器变小， 重新加载页面，然后拉宽浏览器，出现第二行开始没有居中，这种情况：

function waterfall(parentId,boxClass)

{

//获取父元素

var oParent=document.getElementById(parentId);

    //获取class为boxClass的块；

    var aBoxs=getByclass(oParent,boxClass);

    //为了让浏览器变大变小的时候瀑布流的列数保持不变，要计算并确定列数，并保证父元素main的宽度不变

    //每个盒子的宽度

    //这里的clientWidth是页面的宽度，你刷新后伸展拉索都保持不变，但你宽度变了，在刷新，就会改变

    var oBoxW=aBoxs[0].offsetWidth;

    //求出列数

    var colsNum=Math.floor(document.documentElement.clientWidth/oBoxW);

    //设置父元素的宽度

    oParent.style.cssText='width:'+oBoxW*colsNum+'px;margin:0 auto;';

/*    alert(colsNum);*/

    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    //创建一个数组，用于保存每一列的高度，每一个块排列上去时，先判断每一列的高度，哪个最小，就放在哪个下面

    var hArr=[];

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

    {

    if(i<colsNum)

    {

    hArr.push(aBoxs[i].offsetHeight);

    }

    else

    {

    var minH=Math.min.apply(null,hArr);

    var index=getMinhIndex(hArr,minH);//得到的就是第几个块高度中最小的

    //对下一个块的位置left top进行设置

    aBoxs[i].style.position='absolute';

    aBoxs[i].style.top=minH+'px';

    aBoxs[i].style.left=aBoxs[index].offsetLeft+'px';

    //aBoxs[i].style.left=oBoxW*index+'px';

    hArr[index]+=aBoxs[i].offsetHeight;

    }

    }

}