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

Question

上下文

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

需要

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

<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吗？

我不知道如何使用所有这些构建一个codepen，但这是一个包含我的项目的临时URL，显示了这种行为。无限滚动加载后，新项目将转到.grid容器的顶部：

https://stage.e451.net/

谢谢！

Answer 1

另一个＆＃34;我的错误＆＃34;回答：（

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

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

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

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