如何制作平底同位素布局？

Question

我正在使用同位素 js https://isotope.metafizzy.co/ 并且无法理解如何使我的布局像这里 https://diefinnhutte.qodeinteractive.com/masonry-portfolio/ 那样平底。 我无法为我的方块设置固定高度，但在上面的示例中，我认为同位素给出了自己的高度。

如何制作？

我有简单的代码：

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
</div>

我的 CSS：

.grid-item {width: 33%}

和js：

$('.grid').isotope({
    itemSelector: '.grid-item',
    columnWidth: '.grid-item',
    percentPosition: true,
});

在网格项中我有img，它们的高度可能不同，我该怎么办？

提前致谢！

Answer 1

Isotope 非常适合创建这些布局，但它有一些怪癖需要处理。在您的情况下，您正在使用图像，这些图像可能会决定如何计算布局。我建议您使用同一作者的imagesLoaded 库首先检查图像是否已加载，然后再渲染布局。否则，在加载图像之前，砌体布局中的项目将没有任何高度。

如果您想要一个顶部和底部平坦的布局，那么您需要一些固定的高度值。如果图像的完整比例比高度更重要，那根本不可能。

您可以使用 CSS 中的 object-fit 属性为图像赋予 background-size: cover 类型的效果。它将确保任何给定的图像将覆盖砌体网格中项目的整个空间。

在这些示例中，我使用了多个不同大小的图像，尽管它们存在差异，但它们都可以正常工作。

在下面查看带有 Isotope 和 imagesLoaded 的 sn-p。

var $grid = $('.grid').imagesLoaded( function() {
  $grid.isotope({
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
      columnWidth: '.grid-item',
    }
  });
});

*, *::before, *::after {
  box-sizing: border-box;
}

.grid-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 33.3333333%;
  height: auto;
}

.grid-item.is-wide {
  width: 66.6666666%;
}

.grid-item::before {
  content: "";
  grid-area: 1 / 1 / 2 / 2;
  display: block;
}

.grid-item::before,
.grid-item.is-wide.is-high::before {
  padding-top: 100%;
}

.grid-item.is-wide::before {
  padding-top: 50%;
}


.grid-item.is-high::before {
  padding-top: 200%;
}

.grid-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<div class="grid">
  <div class="grid-item">
    <img src="https://www.fillmurray.com/640/360" alt="640x360"/>
  </div>
  <div class="grid-item is-wide">
    <img src="https://www.fillmurray.com/360/640" alt="360x640"/>
  </div>
  <div class="grid-item is-high">
    <img src="https://www.fillmurray.com/420/420" alt="420x420"/>
  </div>
  <div class="grid-item">
    <img src="https://www.fillmurray.com/640/360" alt="640x360"/>
  </div>
  <div class="grid-item ">
    <img src="https://www.fillmurray.com/640/800" alt="640x800"/>
  </div>
  <div class="grid-item is-wide">
    <img src="https://www.fillmurray.com/480/320" alt="640x360"/>
  </div>
  <div class="grid-item">
    <img src="https://www.fillmurray.com/640/360" alt="640x360"/>
  </div>
  <div class="grid-item">
    <img src="https://www.fillmurray.com/360/640" alt="360x640"/>
  </div>
  <div class="grid-item is-wide">
    <img src="https://www.fillmurray.com/420/420" alt="420x420"/>
  </div>
  <div class="grid-item is-high">
    <img src="https://www.fillmurray.com/640/360" alt="640x360"/>
  </div>
  <div class="grid-item">
    <img src="https://www.fillmurray.com/640/800" alt="640x800"/>
  </div>
  <div class="grid-item is-wide">
    <img src="https://www.fillmurray.com/480/320" alt="640x360"/>
  </div>
</div>