0

请在此处查看工作演示：

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 列。但是根据排序算法，您能否建议如何完成？

4

2 回答 2

1

我猜你正在寻找一种以 CSS 为中心的方法来显示结果。我建议有 3 个ul，每个都具有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] );
   }
}

（这是一个未经测试的补丁，一两件事需要调整）

现在您可以从 colSortedList 创建您的 html 项目

[编辑]

如果我理解正确，你有你的初始<ul id="source">显示，你需要建立一个新的 html 节点<ul id="destination">，并调用$('#source').quicksand( $('#destination') );

如果您想“构建一个新的 html 节点”，它对每列的项目进行排序：

  • 使用上述算法让您的项目以正确的顺序排序
  • <li>按照订单插入您的项目colSortedList
于 2012-09-03T07:40:58.200 回答