位置を持つ同位体グリッドアイテム：相対

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();が、この項目は、前のグリッド項目をoverlapingコンテナ.gridの上部に配置されています。この動作は.grid-itemに静的な位置を与えることで修正されましたが、前に説明したように相対位置が本当に必要です。

質問

同位体が比較的位置付け.grid-itemで動作するように取得するためのいくつかの方法がありますか？

私はこのすべてを使ってcodepenを構築する方法はわかりませんが、私のプロジェクトには仮URLがあり、この動作を示しています。

https://stage.e451.net/

ありがとう：無限スクロールロードした後、新しいアイテムは.gridコンテナの上部に行きます！

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

ので、同位体は、後の新しいグリッド項目を管理しませんでした：

は

Answer 1

別の「私のせい」の答え:(

同位体へのコールバックは、無限スクロール負荷後、viewportWidth変数宣言を欠いこの作品：

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