我先把瀏覽器變小， 重新加載頁面，然后拉寬瀏覽器，出現第二行開始沒有居中，這種情況：

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);*/

? ? /////////////////////////////////////////////////////////////////////////////////////////////////////////////////

? ? //創(chuàng)建一個數組，用于保存每一列的高度，每一個塊排列上去時，先判斷每一列的高度，哪個最小，就放在哪個下面

? ? 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;

? ? }

? ? }

}