jQuery quickSand插件

Question

請在此處查看工作演示：

jQuery流沙演示

文件的來源可以從這里下載。

這將以以下方式對數據進行排序：

    A B C D

    E F G H

    I J K L

我正在嘗試使其排序並顯示如下：

A D G
B E H
C F I

我已經更改了css，使其在3列中代替4列來顯示。 但是，根據分類算法，您能否提出建議呢？

Answer 1

我猜您正在以CSS為中心的方法來顯示結果。 我建議每個都有3個ul ，它們分別帶有float:left和固定的高度，並且li正在display: block 。 由於每個li的高度是固定的，因此您可以輕松確定ul的總高度以適合您的要求。 這樣，您可以完全按照上面的描述顯示結果。

這有意義嗎？

Answer 2

您可以先對數組排序，然后獲得：

`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] );
   }
}

（這是一個未經測試的補丁，需要調整一兩個東西）

現在您可以從colSortedList創建html項目

[編輯]

如果我理解正確，您將顯示初始的<ul id="source"> ，您需要構建一個新的html節點<ul id="destination"> ，然后調用$('#source').quicksand( $('#destination') );

如果要“構建新的html節點”，該節點按列對項目進行排序：

• 使用上述算法將您的商品按正確的順序排序
• 按照colSortedList的順序插入<li>項目