4

このJSFiddleに従って、各要素を含むIsotopeコンテナを作成します。リンクのいずれか（左下）をクリックすると、要素を並べ替えて、一致した要素をコンテナの左側にプルします。

これを行うには、それらをDOMから削除し、含まれているdivの先頭に移動します。ブラウザのコンソールを確認すると、これが正常に行われていることがわかりますが、次のIsotopeの呼び出し（再描画）はコールバックを起動しますが、実際の再描画をトリガーしていないようです。なぜそうなるのか完全にはわかりませんが、誰かが説明できますか？

4

2 に答える 2

21

解決しました：

$('#products').isotope( 'reloadItems' ).isotope( { sortBy: 'original-order' } );

あるいは単に：

$('#products').isotope( 'reloadItems' ).isotope();

ただし、reLayoutがこの動作をトリガーしない理由はまだわかりません。

于 2012-05-04T10:36:37.177 に答える
1

グリッドに新しいアイテムを追加した後、それらをIsotopeに追加する必要がありますが、それらを直接追加すると（つまり、アイテムに画像が含まれていて、まだロードされていない場合）、レイアウトは正しくありません。

imageLoaded次のように使用する必要があります。

var $items = $(response).find('.grid-item');
$container.append($items);                    //add items to grid
$container.imagesLoaded(function(){
  $container.isotope( 'appended', $items );   //add items to isotope after images are loaded
});
于 2018-09-06T08:57:52.577 に答える