Question

我需要一些帮助来解决这个数学网格布局问题。也许我只是过度思考这个问题，但我似乎无法找到一种方法对这个网格进行编码，因此它的工作方式与下图所示完全相同。

原件：

enter image description here

通缉：

enter image description here

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

当使用不同的html元素（例如div和article）时，我有一个有效的解决方案：

@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;
    }

这是输出：

AnsiString只是来自 VCL
我将结果输出到字符串txt中，因此只需将其更改为输出类型
"\r\r"表示行尾
x,y是商品i的实际位置，因此您可以使用它来定位单元格
a%b是a/b

第一个例子不够长，无法从中得到公式。实际提供的块不常规。如果你只是有一个错误并且算法是相同的，那么只需将xs常量更改为xs=2在这种情况下输出如下：

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

1 个答案: