【问题标题】：Isotope grid item with position: relative具有位置的同位素网格项目：相对
【发布时间】：2016-12-06 17:10:50
【问题描述】：

上下文

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

需要

我需要为.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/

谢谢！

【问题讨论】：

标签： css layout css-position jquery-isotope

【解决方案1】：

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

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

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

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

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

【讨论】：