Question

我需要实现这一目标（语言并不重要，但是我需要在Javascript-React中做到）：

|SHORT|SHORT|
|SHORT|SHORT|
|SHORT|SHORT|
|SHORT|SHORT|
| LONGTEXTT |
|   SHORT   |
| LONGTEXTT |
|SHORT|SHORT|

在表格布局中。我有一组值，当文本长于X个字符时，我只需要在一行中做一列。

有没有完成的算法？

到目前为止，我已经尝试过：让表示table的数组带有表示rows的数组键，而他的键是columns。我遍历了输入数据的低谷数组，每当我用足够的列填充row时（在本例2中），我就提高了行索引，因此table[1]开始填充。但是我不知道如何继续...

伪代码（JS：D）：

const inputData = ['SHORT','SHORT','LONGTEXT','SHORT'];
const maxColsPerRow = 2;

const rows = [[]];
let j = 0;
for (let col of inputData) {

  // Switch to next row if full
  if (rows[j].length === colsPerRow) j++;

  // Create new row if not exist
  if (!rows[j]) rows.push([]);

  rows[j].push(col)
}

Answer 1

您可以提前查看下一个表行中有多少个项目：如果下一个项目是空的，并且在该项目之后又有另一个项目，则推两个项目。否则，只需按一个：

while (data.length) {
    let next = data.shift();

    if (isshort(next) && data.length && isshort(data[0])) {
        table.push([next, data.shift()])
    } else {
        table.push([next])
    }        
}

或者，也许更一般地说，您可以将其视为简单的断字算法：查看添加下一项是否会使当前行溢出。如果是，则包装：

function weight(s) {
    return (s.length < 6) ? 1 : 2;
}

const cols = 2;                       // number of columns, can be adjusted
let w = 0;                            // current weighted width of the line

for (let next of data) {
    let u = weight(next);

    if (w + u > cols) {
        table.push([]);
        w = 0;
    }

    table[table.length - 1].push(next);

    w += u;
}

可以修改列数和权重函数以创建具有更多列的表。

表格-基于列内容长度的列数

1 个答案: