砌筑高度的砌体

Question

我曾经使用过Masonry做了一些事情，但是想尝试一种新的效果，在我看来它涉及到高度（或者可能不需要）。这是我想要得到的效果：

我的方法是添加另外两个名为水平和垂直的类，每个类具有不同的高度。这似乎没问题。我遇到的问题是它没有产生砖石效果。我已经链接了我目前为止的codepen以及要匹配的markup / 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',
});

只需在你的html

的地址添加jquery即可

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