位置为：相对的同位素网格项

Question

上下文

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

需要

我需要给 .grid-item 一个相对位置，以便将其子元素定位为与父元素 .grid-item 相关的 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

另一个"my fault"回答:(

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

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

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

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

位置为：相对的同位素网格项

Isotope grid item with position: relative

css

layout

css-position

jquery-isotope

上下文

需要

问题

问题