具有设定高度的砌体

Question

我已经将 Masonry 用于一些事情，但想尝试一种在我看来涉及设置高度（或可能不需要）的新效果。这是我想要得到的效果：

我采用的方法是添加 2 个额外的类，称为水平和垂直，每个都有不同的高度。好像还可以我遇到的问题是它没有产生砌体效果。我已经在下面链接了我目前所拥有的代码笔和标记 / jquery 以匹配。

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>

具有设定高度的砌体

Masonry with set heights

jquery

css

jquery-masonry

masonry