请问这种情况怎么解决
我先把浏览器变小, 重新加载页面,然后拉宽浏览器,出现第二行开始没有居中,这种情况:
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;
}
}
}