세트 높이가있는 벽돌

Question

나는 석조물을 몇 가지 용도로 사용했지만, 내 눈에는 높이가 들어간 (또는 할 필요가없는) 새로운 효과를 시험해보고 싶었습니다. 이것은 내가 얻기 위해 노력하고있어 효과 :

이 서로 다른 높이로 수평 및 수직라는 2 개 개의 추가 클래스, 각각을 추가하는 것입니다에 대해 내가 갔어요 방법. 그게 괜찮은 것 같아. 내가 겪고있는 문제는 석조 효과가 없다는 것입니다. 나는 내가 지금까지 가지고있는 마크 업/jquery를 아래의 코드 linked과 연결했다.

https://codepen.io/amymatrix/pen/wrBYPK

HTML

<section class="grid masonry"> 
    <div class="grid-sizer"></div> 
     <div class="grid-item gallery horizontal"> 
      <div class="gallery-style"></div> 
     </div> 
     <div class="grid-item gallery horizontal"> 
      <div class="gallery-style"></div> 
     </div> 
     <div class="grid-item gallery vertical"> 
      <div class="gallery-style"></div> 
     </div> 
     <div class="grid-item gallery horizontal"> 
      <div class="gallery-style"></div> 
     </div> 
    </div> 
</section> 

jQuery를

$('.masonry').masonry({ 
    itemSelector: '.grid-item', 
}); 

SCSS

.grid-item { 
    float: left; 
    width: 33.33%; 
} 

.gallery { 
    &.horizontal { 
     .gallery-style { height: 350px } 
    } 
    &.vertical { 
     .gallery-style { height: 700px } 
    } 
} 

내 문제는 흰색 격차가 두 개의 상단 이미지 아래에 나타나는한다 오른쪽의 세로 하나 때문입니다. 나는 네 번째와 다섯 번째 이미지가 뭉툭하고 그 자리를 차지하는 것을 이상적으로 생각합니다.

그 차이를 방지 할 방법이 있습니까? 아니면 내가 이것을 할 수있는 또 다른 방법?

Answer 1

귀하의 예 '라는 이름의 벽돌과 속성이 있습니다 문제는 codepen

$('.masonry').masonry({ 
    itemSelector: '.grid-item', 
}); 

은 당신의 HTML

<script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script>