JavaScript:对角自动排序变量多维数组

Question

这更像是一个与数学相关的问题.

我试图用jQuery创建一个可爱的淡入淡出效果,通过在一定数量的块中分割一个元素,然后逐渐淡化它们,但是根据另一个数组延迟衰落效果.

所以要创建块表我有两个变量:

var rows = 4,
    cols = 10;

这会将元素分成以下块:

              0   1   2   3   4   5   6   7   8   9
             10  11  12  13  14  15  16  17  18  19
             20  21  22  23  24  25  26  27  28  29
             30  31  32  33  34  35  36  37  38  39

然后我创建另一个数组来决定块的动画效果.例如,对于从左到右的对角线动画,此数组看起来像:

order = [0, 10, 1, 20, 11, 2, 30, 21, 12, 3, 31, 22, 13, 4, 32, 23, 14, 5, 33, 24, 15, 6, 34, 25, 16, 7, 35, 26, 17, 8, 36, 27, 18, 9, 37, 28, 19, 38, 29, 39];

对于这个具体案例,它有效:D

我的问题是如何order根据块数(行x列)自动创建数组,而不是手动创建数组？

谢谢

Answer 1

这将做到这一点：

var arr = [];

var rows = 4;
var cols = 10;

for(var i = 0; i < rows + cols - 1; i++){

    for(var j = Math.min(rows, i + 1) - 1; j >= Math.max(0, i - cols + 1); j--){
        arr.push((j * cols) + i - j);
    }  

}

小提琴： http: //jsfiddle.net/BmXpy/

编辑：这是我尝试解释我是如何想出这个的。重要的是，使用上面的数字表来可视化，如果需要，打印它并画出对角线。

首先，想想我们想要什么，它基本上是对角线。在上面的示例中，第一条对角线是 0，然后是 10、1，然后是 20、11、2，然后是 30、21、12、3 等。现在，如果您考虑一下这些对角线有多少条，那就是rows + cols - 1。这就是我们得到第一个循环的地方：

for(var i = 0; i < rows + cols - 1; i++){

现在，暂时忽略边界。在一般情况下（整个中心），每条对角线都是“行”长。由于我们想要自下而上，所以我们需要一个反向循环。内循环看起来像这样：

for(var j = rows - 1; j >= 0; j--){

现在，我们必须处理两个边界（左边界和右边界）。

对于左边界，如果我们查看小于“行”长的对角线的数量，我们将看到它是rows - 1。对于这些对角线，我们将看到每条对角线的长度都是i + 1。以下内部循环将处理一般情况和左边界：

for(var j = Math.min(rows, i + 1) - 1; j >= 0; j--){

您将看到，对于对角线 0，它将运行一次，对于 1，它将运行两次，等等。对于一般情况 ( i >= rows)，它将运行“行”次。

现在，正确的边界。如果我们查看右侧的哪些对角线比“rows”短，我们将看到所有对角线都大于“cols”（在示例中，cols 为 10，索引为 0，即第 10 行及以后）。对于一般情况和左边界，替换j >= 0为将运行到 0，但对于右边界则缩短。j >= Math.max(0, i - cols + 1)我们得到这个：

for(var j = Math.min(rows, i + 1) - 1; j >= Math.max(0, i - cols + 1); j--){

最后，实际计算每个位置的数量。 i代表对角线并j代表对角线上数字的索引，j = 0如果您正在查看发布的数字表，则该数字是顶部数字。对于j = 0（顶行数字），数字很简单i，对于顶部下方的每一行，我们需要将数字乘以“cols”以获得第一行数字正下方的数字，然后需要将数字调整为左边。这是通过减去j行号来完成的。因此，对于j = 1（第二行），我们需要将数字左移 1（减去 1）。因此，我们i对于第一行的水平位置，+ (j * cols)将其向下移动到适当的行，然后 -j 将其调整为对角线（如果您已经绘制了对角线，请跟踪其中一个以获得良好的视觉效果） 。我们得到这个：

(j * cols) + i - j

把它们放在一起，你就得到了上面我的最终代码。希望这是有道理的。