css - 位置为 : relative 的同位素网格项

Question

上下文

我想构建一个无限滚动加载的同位素网格布局。

需要

我需要给 .grid-item 一个相对位置，以便使用与父元素 .grid- 相关的 position: absolute 定位其子元素元素。

<div class="grid">
   <article class=".grid-item" ?>  <!-- position: relative -->
     <img>                         <!-- position: absolute -->
     <h2>                          <!-- position: absolute -->
   </article>
</div>

问题

无限滚动加载后，将触发回调以使用新的网格元素对布局进行排序:$('.grid').isotope('reloadItems').isotope(); 但这些元素是位于容器 .grid 的顶部，与之前的网格项重叠。此行为是固定的，为 .grid-item 提供静态位置，但我确实需要相对位置，如前所述。

问题

有什么方法可以让 Isotope 与相对定位的 .grid-item 一起工作？

我不知道如何使用所有这些构建代码笔，但这是我的元素的临时 URL，显示了这种行为。无限滚动加载后，新元素进入 .grid 容器的顶部:

https://stage.e451.net/

谢谢!

Answer 1

另一个“我的错”回答:(

Isotope 的回调，在无限滚动加载后，缺少 viewportWidth 变量声明:

if (viewportWidth>=768) {
 $('.grid').isotope('reloadItems').isotope();
};

因此，Isotope 不会在加载后管理新的网格元素。这项工作:

var viewportWidth = $(window).width();
if (viewportWidth>=768) {
 $('.grid').isotope('reloadItems').isotope();
};