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

Question

我需要实现这个(语言不重要，但我需要用 Javascript - React 实现):

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

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

有没有完成的算法？

到目前为止我已经尝试过:让数组代表表，数组键代表行，他的键是列。我遍历输入数据数组，每当我用足够的列填充 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;
}

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