javascript - 根据元素数量和总宽度计算元素的大小

Question

设 X 为已知值，表示一行中将显示多少列(可能的列为 1、2、3 或 4)

设 Y 为元素元素的数量(从 1 到无穷大)

使用Javascript，有没有什么方法/算法来计算Y中每个元素的宽度，以便我们满足X(无论我们使用多少行)并且每个元素的最大大小为2列？

示例 1:设 X 为 4(宽屏)，Y 为 5 个元素，第一行将包含 3 个元素，其中一个元素占用 2 列，第二行将包含 2 个元素，因此两个元素都占用 2 列。

示例 2:设 X 为 4(宽屏)，Y 为 7 个元素，第一行将包含 4 个元素，每个元素占 1 列，第二行将包含 3 个元素，其中一个元素占 2 列。 (顺序无关紧要)

Answer 1

由于可能性的数量非常有限，您只需识别它们即可。很明显，您必须生产多少行并不重要，只有最后或最后两行需要有双倍大小的盒子才能容纳。所有其他行只能有 1 列大小的框。

这是一个函数，它将列出最后几个单元格的宽度，从第一个具有双倍宽度的单元格开始:

function tail(x, y) {
    let mod = y % x;
    if (mod == 0) return []; // All items have size 1
    if (x == 2 || y == 1) return [2]; // Only last item has size 2
    if (x == 3) return [[2, 1, 2, 1], [2, 1]][mod-1];
    if (x == 4) return [[2, 1, 1, 2, 2], [2, 2], [2, 1, 1]][mod-1];
}

现在我们已经完成了艰苦的工作。其余的一切都变得简单。我们可以创建另一个函数，该函数将返回完整的宽度数组，每个项目一个，长度为 y:

function widths(x, y) {
    // Get the special rows that have to appear at the very end
    let arrTail = tail(x, y);
    // Prepend the number of normal cells (all having size 1):
    return Array(y - arrTail.length).fill(1).concat(arrTail);
}

我们可以想到另一个函数，它将使用上面的函数为每个 y 框生成 HTML，为每个框提供一个定义其宽度的类:

function toHtml(x, y) {
    let i = 1;
    return widths(x, y).map(w => `<span class="w${w}_${x}">${i++}<\/span>`)
                       .join("");
}

剩下的就是定义相应的 CSS 和容器元素。

这里是一个代码片段，允许您交互地定义x和y，并实时显示结果:

function tail(x, y) {
    let mod = y % x;
    if (mod == 0) return []; // All items have size 1
    if (x == 2 || y == 1) return [2]; // Last row consists of one item of size 2
    if (x == 3) return [[2, 1, 2, 1], [2, 1]][mod-1];
    if (x == 4) return [[2, 1, 1, 2, 2], [2, 2], [2, 1, 1]][mod-1];
}

function widths(x, y) {
    // Get the special rows that have to appear at the very end
    let arrTail = tail(x, y);
    // Prepend the number of normal cells (all having size 1):
    return Array(y - arrTail.length).fill(1).concat(arrTail);
}

function toHtml(x, y) {
    let i = 1;
    return widths(x, y).map(w => `<span class="w${w}_${x}">${i++}<\/span>`)
                       .join("");
}

// I/O management

let [inputX, inputY] = document.querySelectorAll("input");
let container = document.querySelector("#container");

function refresh() {
    let x = +inputX.value;
    let y = +inputY.value;
    container.innerHTML = toHtml(x, y);
}

refresh();
document.addEventListener("input", refresh);

#container > span {
    box-sizing: border-box;
    border: 1px solid;
    display: inline-block;
    text-align: center;
}

#container > span:nth-child(even) { background: #eee }

.w1_1, .w2_2 { width: 100% }
.w1_3 { width: 33.33% }
.w1_4 { width: 25%; }
.w2_3 { width: 66.66% }
.w2_4, .w1_2 { width: 50%; }

Columns: <input type="number" min="1" max="4" value="4">
Items: <input type="number" min="1" value="7">
<p>
<div id="container"></div>