的JavaScript：自动订购可变多维数组对角 [英] JavaScript: Automatically order a variable multi-dimensional array diagonally

问题描述

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

This is more like a math related question.

我试图创建使用jQuery一个可爱的衰落效应，在一定数目的块分割一个元素，那么褪色他们每个人，但基于另一个阵列延缓褪色效果。

I'm trying to create a cute fading effect with jQuery, by splitting a element in a certain number of blocks, then fading each of them, but delay the fading effect based on another array.

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

So to create the blocks table I have two variables:

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

然后我创建另一个阵列，决定阻止将如何动画。例如，对于一个左到右对角线动画这阵看起来像：

Then I'm creating another array which decides how the blocks will animate. For example, for a left-to-right diagonal animation this array would look like:

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

and for this specific case it works :D

我的问题是我怎么能创建订单阵列自动，而不是手动，基于块（行×列）的数量，这可以改变？

My question is how could I create the order array automatically, not manually, based on the number of blocks (rows x columns), which can change ?

感谢您

推荐答案

这将做到这一点：

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/

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

Here's my attempt at explaining how I came up with this. IMPORTANT, use the table of numbers above to visualize and if needed, print it and draw out the diagonals.

首先，想想我们想要的，它基本上是对角线。另外，在上述第一对角的例子是0，则10，1，然后20，11，2中，然后在30，21，12，3，等等。现在，如果你认为如何那些对角线许多有，这是行+列 - 1 。这就是我们得到的第一个循环：

First, think about what we want, it's basically diagonals. In the example above the first diagonal is 0, then 10, 1, then 20, 11, 2, then 30, 21, 12, 3, etc. Now if you think about how many of those diagonals there are, it is rows + cols - 1. That is where we get the first loop:

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

现在，忽略了第二个边界值。在一般情况下（整个中心），每个这些对角线为行长。而且，由于我们想要去自下而上的，我们希望有一个逆向循环。这应该是这样的内部循环：

Now, ignore for a second the boundries. In the general case (the whole center), each of these diagonals is "rows" long. And since we want to go bottom up, we want a reverse loop. That would look like this for the inner loop:

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

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

Now, we must deal with both boundries (left and right).

有关左侧疆，如果我们看一下它的对角线小于行长的数量，我们将看到它是行 - 1 。而对于这些对角线我们将看到每一个的长度 I + 1 。下面的内循环将处理一般情况下和左疆：

For the left boundry, if we look at the number of diagonals which are less than "rows" long, we will see that it is rows - 1. And for these diagonals we'll see that the length of each is i + 1. The following inner loop will handle the general case and the left boundry:

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

您将看到对角0，这将运行一次，1它将运行两次，等等。而对于一般的情况下（ I＆GT; =行）它将运行行时代。

You will see that for diagonal 0, this will run once, for 1 it will run twice, etc. And for the general case (i >= rows) it will run "rows" times.

现在，正确疆。如果我们看一下它右边对角线比行短，我们将看到它比COLS大对角线的所有（在例子COLS为10，0索引，这是第10行及以后）。更换 J＆GT; = 0 与 J＆GT; = Math.max（0，I - COLS + 1）将运行为0的一般情况和左疆但缩短为右疆。我们得到这样的：

Now, the right boundry. If we look at which diagonals on the right are shorter than "rows", we will see it is all diagonals greater than "cols" (in the example where cols is 10, 0 indexed, that is row 10 and beyond). Replacing j >= 0 with j >= Math.max(0, i - cols + 1) will run to 0 for the general case and the left boundry but shorten for the right boundry. We get this:

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

最后，在每个位置的数目的实际计算。 I 重新presents对角线和Ĵ重新presents对角线上的数的指数 J = 0 是上面的数字，如果你正在寻找数字的公布表。对于 J = 0 （数字顶行）的数量仅仅是 I ，下面顶的每一行，我们需要通过COLS，以直接获得低于第一行数目的数目乘以号码，然后数需要调整到左侧。这是通过减去Ĵ这是行号完成。因此，对于 J = 1 （第2行），我们需要移动一个左边的数字（减去1）。因此，我们有 I 第一行上的水平位置， +（J * COLS）将其移动到相应的行，然后-j将其调整到对角线的（如果你画对角线，追溯这一出其中一人获得良好的视觉）。我们得到这样的：

And finally, the actual calculation of the number in each location. i represents the diagonal and j represents the index of the number on the diagonal j = 0 is the top number if you're looking at the posted table of numbers. For j = 0 (top row of numbers) the number is simply i, for each row below the top, we need to multiply the number by "cols" in order to get the number directly below the first row number, then the number needs to be adjusted to the left. This is done by subtracting j which is the row number. So for j = 1 (the 2nd row) we need to move the number left by one (subtract 1). So we have i for the horizontal position on the first row, + (j * cols) to move it down to the appropriate row and then -j to adjust it to diagonal (if you have drawn the diagonals, trace this out for one of them to get a good visual). We get this:

(j * cols) + i - j

把它放在一起，你会得到我上面的最后code。希望做一些感觉。

Put it all together and you get my final code above. Hope that made some sense.

这篇关于的JavaScript：自动订购可变多维数组对角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！