1

構築中のサイトに 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リンク:

http://jsfiddle.net/NXNZH/

4

0 に答える 0