请问这种情况怎么解决

来源:2-4 JavaScript实现瀑布流布局中图片排序

lewandowski

2016-05-17 11:29

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

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回答

  • Mr_Mask
    2016-06-06 11:36:59

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

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题