我如何修改这个重新排序的算法？

Question

背景：

我昨天问了这个问题：

如何修改跨越多列的

的方向？

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

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 行，并使用了一种棘手的矩阵算法（读：黑魔法），我无法理解。

我正在探索这个问题，试图增加可变性，但不幸的是，它对我来说并没有走到一起，而且今天是这些东西的最后期限。

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

有没有人对这件事有更好的头脑，可以给我指引正确的方向？

Answer 1

我知道它不像您在该问题中接受的答案那么“优雅”，但是 我在 我昨天的回答非常适合您：

http://jsfiddle.net/AcdcD/

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

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

如果你没有时间，也许你可以使用这个？

Answer 2

jQuery 插件 .transpose()

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

查看我的详细博客文章< /a> 带有转换美国各州的示例，然后前往插件所在的 GitHub维护，您还可以获得它的缩小版本（从版本 1.2 开始为 915 字节）。

您需要做的就是：

$("yourSelector").transpose();

在您的情况下，这将是

$("li").transpose();

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

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

Answer 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;

Answer 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
    }  
}  

Answer 5

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

第 1 步很简单，因为一维列表与 HTML 源中的

元素的顺序相同。

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

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

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