Создание разбиения раздела после элементов галереи сетки 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. Вы должны добавить JQuery в jsfiddle
2. jsfiddle выполняет яваскрипта 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');