如何修改这个重新排序 <ul> 的算法？答案

【问题标题】：How can I modify this algorithm which reorders a <ul>?如何修改这个重新排序 <ul> 的算法？
【发布时间】：2011-06-03 10:35:37
【问题描述】：

背景：

我昨天问了这个问题：

How to modify the orientation of a <ul> spanning multiple columns?

询问如何转换这样的列表：

a  b  c

d  e  f

g  h  i

j  k  l

进入这样的列表：

a  e  i

b  f  j

c  g  k

d  h  l

我收到了beeflavor 的真棒回复：http://jsfiddle.net/H4FPw/12/

问题：

不幸的是，我没有指定可以有任意数量的列表项，因此他的响应被硬编码为 4 行，并使用了一种棘手的矩阵算法（阅读：black magic）我无法绕开我的头。

我对此进行了反复推敲，试图增加可变性，但不幸的是，这对我来说并没有融合在一起，今天是这些东西的最后期限。

这是我遇到的问题的更新示例：http://jsfiddle.net/H4FPw/13/

有没有人对这些东西有更好的头脑，可以引导我朝着正确的方向前进？

【问题讨论】：

标签： javascript html algorithm math matrix

【解决方案1】：

我知道它不像你在那个问题中接受的答案那样“优雅”，但我昨天在my answer 中链接到的the code 确实对你很有效：

http://jsfiddle.net/AcdcD/

如果不需要处理大小调整，可以稍微简化一下：

http://jsfiddle.net/AcdcD/1/

如果你没时间的话，也许你可以用这个？

【讨论】：

我昨天看到了你的解决方案，我认为这很好，但你说“好吧，如果你不关心 IE，你可以”.. 问题是，我必须迎合IE 所以我认为这不会是一个跑步者。然而，我刚刚在 IE8、IE7 和 Quirks 模式下加载了它，它运行良好！你是说IE6吗？不幸的是，我没有 IE6 的副本（从没想过我会这么说！），所以我无法对其进行测试。在IE6中是什么效果？
“如果您不关心 IE”仅适用于 CSS3 列，请参阅：caniuse.com/#search=multiple%20column。 CSS3 列本来是 完美的 解决方案，但那该死的 IE.. jQuery 将在所有浏览器中工作。（我刚刚检查了 IE6，它似乎也可以在那里工作）。
老兄，在我看来，你是当今世界的王者。这太棒了。

【解决方案2】：

jQuery插件`.transpose()`

正是你想要它做的。我需要同样的东西，所以我编写了一个通用的 jQuery 插件，它可以转换任何浮动或内联阻塞的元素，这些元素似乎在列中，但它们的顺序是在行中。

查看我的detailed blog post 以及转换美国各州的示例，然后查看维护插件的head over to GitHub，您还可以获得它的缩小版本（从版本 1.2 起为 915 字节）。

您需要做的就是：

$("yourSelector").transpose();

在你的情况下

$("li").transpose();

好消息是插件检查最初有多少列（在转置之前）并在之后转置到相同数量的列。它不会在 DOM 中添加任何额外的 HTML 元素（如浮动列包装器或类似的），它只是重新排列现有元素。这对于页面的 CSS 设置非常有用，因为它不会以任何方式影响它们的形状或形式。

它还区分不同的元素列表（包含在不同容器中的项目），就好像您有两个需要转置的 UL 元素一样。您不必每次都调用.transpose()，因为插件会为您执行此操作。您仍然可以使用与之前编写的相同的选择器。

【讨论】：

谢谢。看起来真的很好。我已经实现了另一个解决方案，但如果我必须再次做类似的事情，我一定会记住这一点。

【解决方案3】：

这段代码怎么样：

jsfiddle

// I add a number of new elements to the <ul>, in this case, 'm', 'n', 'o' &'p'

var rowcount = 6; // I increase rowcount from 4 to 6 to accommodate the new elements
var colcount = 3;
var ichild=$('.directory-result-list-bottom').children();
var wf= "<li class='directory-result-text'>";
var wb= "</li>"
var k="";
var u;
var v;
var carryover=0;

$('.directory-result-list-bottom').empty();

for(var i = 0; i<rowcount; i++){
    carryover=0;
    for(var j=0; j<colcount; j ++){
        k=k+wf+(ichild[(j*rowcount)+i].innerHTML)+wb;
    }  
}    
document.getElementById('place').innerHTML=k;

【讨论】：

这不太行。尝试（例如）删除包含r 的<li>。

【解决方案4】：

我认为需要空的 LI 来填补空白。

这应该可行：

for(var i = 0; i<rowcount; i++){
    for(var j=0; j<colcount; j ++){
        var n = (j*rowcount)+i;
        if (ichild[n]) 
            k=k+wf+(ichild[n].innerHTML)+wb;
        else
           k = k + wf + wb
    }  
}

【讨论】：

【解决方案5】：

我认为将项目表示为一维列表 (a,b,c...) 并考虑如何 1) 从原始数组中获取它以及 2) 将其转换为输出数组更简单。

第 1 步很简单，因为一维列表与 HTML 源代码中的 <li> 元素的顺序相同。

所以，假设我们有 n 元素，我们希望将它们放入 R 行和 C 列，但首先填充列。就位的元素 (r,c)（基于 0）就是元素 #R*c + r。而且，如前所述，源文件中的顺序是行优先顺序，即(0,0), (0,1), (0,2), ...

如果元素的数量没有完全填满 RxC 网格，那么您必须添加检查以确保计算的元素数量不超过 n（最简单的方法是预先用空元素填充列表）。

根据设计要求，您还可以对其进行调整，以在给定固定行数或列数的情况下最大限度地减少空白元素的数量。

【讨论】：

jQuery插件.transpose()

jQuery插件`.transpose()`