Jquery quickSand插件

Question

请在此处查看工作演示：

jQuery Quicksand demo

可以从here.

下载文件来源

按以下方式对数据进行排序：

    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为中心的方法来显示结果。我建议每个ul有float:left个li和固定高度，display: block为li。由于每个ul的高度都是固定的，因此您可以轻松确定{{1}}的总高度以满足您的要求。这样您就可以完全按照上面的描述显示结果。

这有意义吗？

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节点”，对每列的项目进行排序：

• 使用上述算法让您的项目按正确的顺序排序
• 按照<li>
中的顺序插入colSortedList项