javascript - 在 Javascript 网格库元素之后创建分节符

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/

两个问题:

1. 你必须在 jsfiddle 中添加 jquery
2. jsfiddle 默认执行 javascript onload。要么摆脱 window.addEventListener("load", renderGrid, false);，要么只使用 renderGrid() 而不使用 addEventListener

要在 masonry 之后呈现页脚，您需要根据最低网格项的最大高度手动设置容器的高度。您需要对其进行微调，但这有效: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');