構築中のサイトに jQuery Isotope を実装しましたが、奇妙な問題に遭遇しました。初期の組積造レイアウトは正常に機能します。「シャッフル」機能を呼び出すランダム化ボタンがあり、期待どおりの動作をします。
機能しないボタンは、画像タイトルによる並べ替えを実装するボタンです。並べ替え自体は正常に機能します。つまり、アイテムは最終的に正しい順序で表示されますが、石造りのレイアウトが崩れ、すべての画像がコンテナーの左側に 1 行で表示されます。
以下は、初期の同位体ロード関数、動作中の「シャッフル」関数、壊れた「sortBy」関数です。
var $container = jQuery('#isotopegallery');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.photo',
masonry: {
coumnWidth: 270,
gutterWidth: 10
}
});
});
jQuery('#randomize').click(function(){
$container.isotope( 'shuffle' );
});
//Isotope sort data
$container.isotope({
getSortData : {
title : function ( $elem ) {
return $elem.find('.title').text();
}
}
});
jQuery('#sortByTitle').click(function(){
$container.isotope({ sortBy : 'title'});
});
編集:私がやっていることの単純化されたバージョンで jsFiddle を構築しました。もちろん、そこでは完全に正常に動作します。実際のプロジェクトで何が違うのかを探しています。以下のjsFiddleリンク: