Maçonnerie avec des hauteurs fixes

Question

J'ai utilisé la Maçonnerie pour un certain nombre de choses mais je voulais essayer un nouvel effet qui, à mes yeux, implique des hauteurs fixes (ou peut ne pas l'être). Ceci est l'effet que je suis en train de faire:

La façon dont je suis allé à ce sujet est d'ajouter 2 classes supplémentaires appelées horizontales et verticales, chacune avec des hauteurs différentes. Cela semble être bien. Le problème que je suis est qu'il ne fait pas un effet de maçonnerie. J'ai lié un codepen ci-dessous de ce que j'ai jusqu'ici et le markup/jquery pour correspondre.

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 } 
    } 
} 

Mon problème est l'écart blanc apparaît sous les deux images haut en raison de la verticale sur la droite. J'aimerais idéalement que la quatrième et la cinquième image se mettent à trembler et à prendre cette place.

Existe-t-il un moyen de prévenir cet écart? Ou une autre façon de faire cela?

Answer 1

Votre exemple est bien le problème a été le vous n'étiez pas appeler jquery codepen

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

juste ajouter jquery au html à votre

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