0

この質問は、これに対するフォローアップです： 同位体グリッド+空のスペースを削除するコーナースタンプ、ソートロジック

そこでの答えは、フィルタリングされていない同位体レイアウトで完璧に機能します。ただし、一部の要素が削除されると、この機能は機能しなくなります。

これに対応するために、前の回答のコードを変更する良い方法があるかどうか疑問に思っています。

コーナースタンプをクリックすると基本的なフィルターが追加されたフィドルは次のとおりです。http：//jsfiddle.net/zewkG/13/

フィルタリングするコーナースタンプをクリックした後、要素11または15をクリックすると、レイアウトにもう一度ギャップがあることに注意してください。

4

1 に答える 1

2

ここに解決策があります：http://jsfiddle.net/zewkG/14/

$('.corner-stamp').click( function() {
    $container.isotope( 'destroy' );
    grid('.item.odd');
    $container.isotope('remove', $('.item:not(.odd)') )    
    $container.isotope('updateSortData', $('.item.odd'));
});

編集：

正解: http://jsfiddle.net/zewkG/16/

問題はここにありました：

getSortData : {
      fitOrder : function( $item ) {
        var index = $item.index();

そのはず：

getSortData : {
      fitOrder : function( $item ) {
        var index = $item.index(selector);

-1そして、このようにして、ソートロジックにあった醜いものを取り除くことができます:

if ( $item.hasClass('large')) {
      if(index>10){
          order = Math.floor((index-1) / (columns))*(columns) + 1.5;
      }else{
          order = Math.floor((index-1) / (columns-1))*(columns-1) + .5;
      }
}

になる

if ( $item.hasClass('large')) {
      if(index>10){
          order = Math.floor((index) / (columns))*(columns) + 1.5;
      }else{
          order = Math.floor((index) / (columns-1))*(columns-1) + .5;
      }
}

その理由は

  • すべてのボックスがある場合、box1 のインデックスは 0、box2 のインデックスは 1、box3 のインデックスは 2...
  • 奇数の場合、box1 のインデックスは 0、box3 のインデックスは 1、box5 のインデックスは 2...

そのため、並べ替えロジックを維持するために、ボックスのテキストとそのインデックスの間の対応を解除します。

ついに、

$('.corner-stamp').click( function() {
    $container.isotope( 'destroy' );
    grid('.item.odd');
    $('.item:not(.odd)').css('display','none');   
});

そうしない$('.item:not(.odd)').css('display','none')と、アニメーション化された奇数ボックスの下に偶数ボックスが表示されるためです。

編集2：

http://jsfiddle.net/zewkG/8/にバグがあったことを覚えていますか: ボックス番号 13,17,21 (行の最後) をクリックすると、代わりに次の行に移動しましたその行の先頭。http://jsfiddle.net/zewkG/9​​/で修正しましたか？

しかしその後、回帰が発生したようで、固定された並べ替えロジックが古いものに置き換えられました。

だから私はあなたのhttp://jsfiddle.net/zewkG/19/をhttp://jsfiddle.net/zewkG/20/に修正しました

固定の並べ替えロジックは次のとおりです。

if ($item.hasClass('large')) {
    if(index>10){
        order = Math.floor((index-1) / (columns))*(columns) + 1.5;
    }else{
        order = Math.floor((index) / (columns-1))*(columns-1) + .5;
    }
}else {
    order = index + 1;
}
于 2012-08-15T23:21:16.380 に答える