如何解決這個響應式網格數學問題

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