자바 스크립트 그리드 갤러리 항목 이후에 구역 나누기 만들기

Question

상자가 컨테이너 밖으로 튀어 나와 갤러리 뒤를 따라야하지만 자바 스크립트 그리드 갤러리를 구현하려고합니다. 전체 그리드 컨테이너 주위에 다른 DIV를 래핑하거나 clearfixes를 추가했지만 성공하지는 못했습니다.

JSFiddle : 이 https://jsfiddle.net/ssdfjoLp/ (그러나 몰라 제대로 그리드 레이아웃을 렌더링하지 않는 이유)

자바 스크립트 :

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. 당신은
2. jsfiddle는 기본적으로 자바 스크립트 온로드를 실행 jsfiddle하는 jQuery를 추가해야합니다. 어느 window.addEventListener("load", renderGrid, false); 제거하거나 석공 술 후 렌더링 바닥 글을 얻을 수 addEventListener

없이 renderGrid()을 사용하여 얻을, 당신은 수동으로 가장 낮은 그리드 항목의 최대 높이를 기반으로 컨테이너의 높이를 설정해야합니다. 당신은 그것을 세부적으로 조정해야하지만이 작품 : 텍스트 때문에 당신의 `.grid 항목의 보이지 않는 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');