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为中心的方法来显示结果。我建议有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节点”来对每个列的项进行排序：

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