Кладка с установленной высотой

Question

Я использовал масонство для нескольких вещей, но хотел опробовать новый эффект, который, на мой взгляд, включает заданные высоты (или, возможно, не нужно). Это эффект, который я пытаюсь получить:

Я решил добавить 2 дополнительных класса, называемых горизонтальными и вертикальными, каждый с разной высотой. Кажется, все в порядке. Проблема, которую я имею, состоит в том, что это не производит каменный эффект. Я связал нижеприведенный код с тем, что у меня есть, и разметкой / jquery, чтобы соответствовать.

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

Ваш пример хорош, проблема была в том, что вы не вызывали jquery codepen

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

просто добавьте JQuery на ваш HTML

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