Creating a section break after Javascript grid gallery items

Question

I am trying to implement a javascript grid gallery, however the boxes float out of the container, and thus over the elements that should come after the gallery. I tried wrapping another DIV around the entire grid container, or adding clearfixes, but without success.

JSFiddle: https://jsfiddle.net/ssdfjoLp/ (however does not render the grid layout correctly, dunno why)

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

It actually works. Check it out: https://jsfiddle.net/ssdfjoLp/1/

Two problems:

1. You have to add jquery to jsfiddle
2. jsfiddle executes javascript onload by default. Either get rid of window.addEventListener("load", renderGrid, false); or just use renderGrid() without the addEventListener

To get the footer rendered after the masonry, you will need to manually set the height of the container based on the maximum height of the lowest grid-item. You will need to finetune it, but this works: 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');