0

300pxのグリッド（3x3）があり、各グリッドフィールドの幅は100pxです。

ここでjsfiddleを見てみると、非常に簡単に説明できます。Onloadsレイアウトアイソトープはうまく機能しますが、たとえばli要素＃2をクリックすると、グリッドが再分類されますが、スペースを正しく使用しません。

なぜ3の隣にあるのliですか？li4がそこに収まります！同位体がこれを処理すると思いましたか？これを取得する方法は？

ご協力いただきありがとうございます！frgtv10

http://jsfiddle.net/pEZtj/

4

1 に答える 1

1

問題は、近似順序関数にあります。2をクリックすると、順序が2.5（インデックス1 + 1.5）に設定されますが、これは4の順序（インデックス3）よりもまだ小さくなっています。同じことが2の次数を持つ3にも当てはまります。

これを修正するには、より複雑な注文関数が必要です。これが4つの要素に対してのみ機能する必要があると仮定すると、次のコードが機能するはずです。

if(index == 0) { //element 1 should appear first
      order = 0;
}
else if ( $item.hasClass('large') && index % 3 == 1 ) {
      order = index + 2.5;
}
else if ( $item.hasClass('large') && index % 3 == 2 ) {
      order = index + 1.5;
}  
else {
      order = index;
}

編集：コードを少しきれいにし、任意のサイズの行をサポートするには、並べ替え関数を次のように表示します。

int columns = 3;
if(index % columns == 0) { //element 1 should appear first
      order = index;
}
else if ( $item.hasClass('large')) {
      order = index + columns - (index % columns) + .5;
} 
else {
      order = index;
}
于 2012-07-23T13:35:51.030 に答える