3

私はアイソトープを少し http://isotope.metafizzy.co/demos/relayout.html で遊んでいて、固定サイズのままで、常に6つの小さいアイテムを持ち、フィットするように再シャッフルする親コンテナーを作成しようとしています。 7番目に大きいアイテム。

これが私がこれまでjsfiddleに持っているものです http://jsfiddle.net/pedalpete/LGBg6/

私が望んでいたのは、任意のブロックをクリックした後、任意の1行の小さいブロックの総数が3になることです。

何らかの理由で、user .isotope（'resize'）を使用するか、または私が行っているように同位体を再作成して再作成すると、一番上の行に3より大きい数値が表示されるため、アイテムが均等に並べ替えられません。

頼りにした後の配置はやや静的になると思いました。同位体をバインディングボックスの幅と高さのパラメータに従わせる方法はありますか？

4

1 に答える 1

18

私の解決策については、 http：//jsfiddle.net/desandro/S5vAG/を参照してください。

同位体をバインディングボックスの幅と高さのパラメータに従わせる方法はありますか？

最初のステップは、コンテナのサイズ変更を無効にすることです。resizesContainerオプションを設定しますfalse。

これらのブロックをコンテナに適合させるには、いくつかの方法があります。独自のlayoutModeを作成することも、並べ替えを試してみることができます。これが私が採用したソリューションです。

また、別のlayoutModeを使用しましたfitColumns。これは、目的に合っていると思います。パラメータを使用するgetSortDataと、ロジックは、アイテムのクラスがlargeANDで偶数の場合、次の列にプッシュバックされるというものです。したがって、2、4、6はすべて、大きいときに次の列に配置されます。

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

    if ( $item.hasClass('large') && index % 2 ) {
      order = index + 1.5;
    } else {
      order = index;
    }
    return order;
  }
},
于 2011-02-24T17:01:03.000 に答える