Question

我正在尝试实现一个javascript网格库，但是这些框从容器中浮出，因此会超出应该在库之后的元素。我尝试在整个网格容器周围包装另一个DIV，或添加clearfixes，但没有成功。

的jsfiddle： https://jsfiddle.net/ssdfjoLp/（但是没有正确渲染网格布局，不知道为什么）

使用Javascript：

function renderGrid(){
var blocks = document.getElementById("grid_container").children;
var pad = 0, cols = 3, newleft, newtop;
for(var i = 1; i < blocks.length; i++){
if (i % cols == 0) {
newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
blocks[i].style.top = newtop+"px";
} else {
if(blocks[i-cols]){
newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
blocks[i].style.top = newtop+"px";
}
newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth) + pad;
blocks[i].style.left = newleft+"px";    
}
} 
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);

CSS：

#grid_container{
position:relative;
width:100%;
margin:0px auto;
height: auto;
}
.grid-item{
position:absolute;
width: 33.33333%;
border: #000 1px solid;
}
.grid-item:nth-child(2n+0) {
background: #FFDC64;
}
.grid-item:nth-child(2n+1) {
background: #FEC910;
}
#grid_container .grid-item > div{
padding: 20px;
font-size: 27px;
color:#D9A800;
}

HTML：

<div id="grid_container_holder">
<div id="grid_container">
  <div class="grid-item" style="height:140px;"> <div>1</div> </div>
  <div class="grid-item" style="height:200px;"> <div>2</div> </div>
  <div class="grid-item" style="height:120px;"> <div>3</div> </div>
  <div class="grid-item" style="height:180px;"> <div>4</div> </div>
  <div class="grid-item" style="height:150px;"> <div>5</div> </div>
  <div class="grid-item" style="height:110px;"> <div>6</div> </div>
  <div class="grid-item" style="height:180px;"> <div>7</div> </div>
  <div class="grid-item" style="height:170px;"> <div>8</div> </div>
  <div class="grid-item" style="height:150px;"> <div>9</div> </div>
  <div class="grid-item" style="height:180px;"> <div>10</div> </div>
  <div class="grid-item" style="height:150px;"> <div>11</div> </div>
  <div class="grid-item" style="height:160px;"> <div>12</div> </div>
  <div class="grid-item" style="height:140px;"> <div>13</div> </div>
  <div class="grid-item" style="height:140px;"> <div>14</div> </div>
  <div class="grid-item" style="height:220px;"> <div>15</div> </div>
</div><!--grid-->
</div><!--grid holder-->
<div>Section to come after gallery items</div>

Answer 1

它确实有效。看看：https://jsfiddle.net/ssdfjoLp/1/

两个问题：

您必须将jquery添加到jsfiddle
jsfiddle默认执行javascript onload。要么摆脱window.addEventListener("load", renderGrid, false);，要么在没有renderGrid()

addEventListener

要在砌体后渲染页脚，您需要根据最低网格项的最大高度手动设置容器的高度。您需要对其进行微调，但这可行：https://jsfiddle.net/ssdfjoLp/3/

function renderGrid(){
    var blocks = document.getElementById("grid_container").children;
    var pad = 0, cols = 3, newleft, newtop;

    var max_height = 0;

    for(var i = 1; i < blocks.length; i++){
        if (i % cols == 0) {
            newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;

            // Get maximum height plus item height
            max_height = Math.max(max_height, newtop + blocks[i-cols].offsetHeight)

            blocks[i].style.top = newtop+"px";
        } else {
            if(blocks[i-cols]){
                newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
                blocks[i].style.top = newtop+"px";
            }
            newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth) + pad;
            blocks[i].style.left = newleft+"px";
        }
    }

    // Set the height of grid_container
    $('#grid_container').css('height', max_height)
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);

var totalheight = $('#grid_container').height();
$('#heightholder').html('container height: '+totalheight+'px');

在Javascript网格库项

1 个答案: