jQuery quickSand 插件答案

【问题标题】：Jquery quickSand PluginjQuery quickSand 插件
【发布时间】：2016-05-07 01:00:28
【问题描述】：

请在此处查看工作演示：

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

【问题讨论】：

标签： jquery css quicksand

【解决方案1】：

我猜你正在寻找一种以 CSS 为中心的方法来显示结果。我建议有 3 个ul，每个都有float:left 和固定高度，li 是display: block。由于每个li 的高度是固定的，您可以轻松确定ul 的总高度以满足您的要求。这样您就可以完全按照上面的描述显示结果。

这有意义吗？

【讨论】：

是的，我尝试了这个解决方案，但是在重新洗牌后 3 个 ul 会变成一个 ul。因此会破坏显示，bcz 流沙不会考虑 ul 的。

【解决方案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>项目

【讨论】：

感谢您的帮助。您是否检查过 quicksand.js ，我需要更改相同的内容才能执行此操作。