如何解决这个响应式网格数学问题

Question

我需要一些帮助来解决这个数学网格布局问题。也许我只是在想这个，但我似乎无法找到一种方法来编码这个网格，所以它的工作原理与下面的图片完全一样。

原件：

寻求：

的第一个和第二个之间的差异基本上是响应断点。我们从3列布局到2列布局。为了可访问性，这里面必须是li。

我使用不同的HTML元素，如股利和文章的时候有一个有效的解决方案，当这样的：

@for $i from 1 through 30 { 
    div:nth-of-type(#{$i * 2 - 1}), article:nth-of-type(#{$i * 2}) { 
     order:#{$i * 2 - 1}; 
     @include flex(0 0 50%); 
    } 

    article:nth-of-type(#{$i * 2 - 1}), section:nth-of-type(#{$i * 2}) { 
     order:#{$i * 2}; 
    } 
} 

只是为了更清楚，这里是每块的预期行为在网格

Original order --> New order 
1  -->  1 
2  -->  2 
3  -->  5 
4  -->  3 
5  -->  4 
6  -->  7 
7  -->  6 
8  -->  9 
9  -->  10 
10  -->  8 
11  -->  11 
12  -->  12 

我正在寻找一个计算新订单头寸的公式。

Answer 1

不知道如何将它应用到你的语言中，所以我将提供C++示例（只需提取公式）。第二个例子很简单：

const int xs=3;      // max numer of numbers in line 
const int ys=9;      // nuber of lines 
AnsiString layout() 
    { 
    AnsiString txt; 
    int i,x,y; 
    for (i=1,x=0,y=0;y<ys;i++) 
     { 
     if (i<100) txt+=" ";  // align to 3 digits 
     if (i< 10) txt+=" "; 
     txt+=" "+AnsiString(i);  // add number to layout text 
     if (y%(xs+1)==0) { x++; if (x>=xs) { x=0; y++; txt+="\r\n"; }} // xs numbers per line 
     else         { y++; txt+="\r\n"; } // single number per line 
     } 
    return txt; 
    } 

这是输出：

1 2 3 
    4 
    5 
    6 
    7 8 9 
    10 
    11 
    12 
    13 14 15 

• AnsiString只是串类从VCL
• 我把结果输出到字符串txt所以就改到您的输出类型
• "\r\r"意味着行末
• x,y是项目i的实际位置，所以你可以用它来定位细胞
• a%b是a/b

剩余部分中的第一个例子是不是足够长的时间从它那里得到的公式。实际提供的块不规则。如果你只是有一个错误在它和算法相同，则只需改变xs常数xs=2在这种情况下，输出的样子：

1 2 
    3 
    4 
    5 6 
    7 
    8 
    9 10 
    11 
    12