與位置同位素網格項：相對

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 overlaping以前的網格項目的頂部。這種行爲是固定的，給.grid-item一個靜態位置，但我真的需要相對位置，如前所述。

問題

有一些辦法讓同位素與一個.grid-item工作相對定位？

我不知道如何建立一個codepen與所有這些，但這是一個與我的項目，顯示此行爲的臨時URL。無限滾動負載後，新項目去.grid容器的頂部：

https://stage.e451.net/

謝謝！

Answer 1

另一個「我的錯」的答案:(

回調同位素，無限滾動加載後，缺乏viewportWidth變量聲明：

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

所以，同位素沒有管理後新的電網項目這項工作：

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