为了账号安全,请及时绑定邮箱和手机立即绑定

请问这种情况怎么解决

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

573a8f860001ac8605000387.jpg

573a8f87000136fb05000266.jpg

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;

    }


    }

}


正在回答

1 回答

这个不是自适应,你可以去网上找找关于自适应的,当游览器onresize即游览器的窗口大小调整,图片自动适应游览器宽度。不知道说的对不对,下面的同学可以给我改正

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

请问这种情况怎么解决

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信