0

こちらの作業デモをご覧ください：

jQueryQuicksandデモ

ファイルのソースはここからダウンロードできます。

これにより、次の方法でデータが並べ替えられます。

    A B C D

    E F G H

    I J K L

私はそれをこのようにソートして表示しようとしています：

A D G
B E H
C F I

cssを変更して、4列ではなく3列で表示するようにしました。しかし、ソートアルゴリズムに従って、それをどのように行うことができるかを提案していただけますか？

4

2 に答える 2

1

結果表示のための CSS 中心のアプローチを見ていると思います。ul私は 3 つそれぞれfloat:leftと固定の高さをli持っていることをお勧めしdisplay: blockます。それぞれの高さliが固定されているので、必要に応じて全体の高さをul簡単に決定できます。そうすれば、上記で説明したとおりに結果を表示できます。

これは理にかなっていますか？

于 2012-09-03T10:37:51.513 に答える
0

最初に配列をソートして、以下を取得できます。

`sortedList = [A,B,C,D,E,F,G,H,I,...]`

ここから、ディスプレイのフロー順序でアイテムを格納するリストを計算します。

var colSortedList = [];
var gap = sortedList.length / colnumber;
var i, j;
for (i=0; i<colnumber; i++){
   for(j=0; j+i < sortedList.length; j+=gap){
       colSortedist.push( sortedList[j+i] );
   }
}

(これはテストされていないパッチです。1 つまたは 2 つの調整が必要です)

これで、colSortedList から html アイテムを作成できます

[編集]

私の理解が正しければ、あなたのイニシャルが<ul id="source">表示されました。新しい html node を構築し、<ul id="destination">呼び出す必要があります。$('#source').quicksand( $('#destination') );

列ごとにアイテムをソートする「新しいhtmlノードを構築」したい場合：

  • 上記のアルゴリズムを使用して、アイテムを正しい順序で並べ替えます
  • <li>注文に従ってアイテムを挿入しますcolSortedList
于 2012-09-03T07:40:58.200 に答える