Динамическая сетка в JS

Question

У меня есть Сетка, которую я построил, но она не работает точно правильно. Похоже, математика может быть немного не в порядке.

Итак, мои входные данные - это просто массив псевдокодов ниже. Но просто знайте, что он состоит из нескольких компонентов React, и эти объекты имеют свойство span, которое изменяется в зависимости от самого объекта.

ввод данных псевдокода

array = [
  {child.. span=100}, {child..span=50}, {child.. span=50}, {child.. span=100}, {child..span=100}
];

Я хочу создать многомерный массив с выходными данными, соответствующими значениям входного диапазона. Я имею в виду, что если span равен 100, тогда он должен создать строку со столбцом внутри. Если значение реквизита для следующего дочернего элемента равно 50, тогда он должен создать новую строку и добавить этого дочернего элемента. Если следующее значение - это еще 50, то не должно создавать новую строку , а вместо просто добавить этого нового дочернего элемента во второй диапазон в последней строке и так далее. ..

Так что в основном все 100 промежутков должны быть в своем собственном ряду и пролете. Любой промежуток 50 должен быть в их собственном ряду вместе в отдельных промежутках.

Example pseudocode structure:  [ [ {col} ], [ {col}, {col} ], [ {col} ] ]

внешний массив представляет сетку, внутренние скобки - строки, а внутри - столбцы. Эта структура изменяется в зависимости от размера пролета, как я уже говорил выше. сейчас сетка 2 х 2, но это может измениться.

Сетка код

  const grid = [];
  const size = 2;
  array.forEach((child, index) => {
    const spanPercent = child.props.span;
    const size = 100 / spanPercent;
    const rowIndex = Math.floor(index / size);
    const colIndex = index % size;
    const row = grid[rowIndex] || (grid[rowIndex] = []);
    row[colIndex] = child;
  }); 

Выше приведено неверное вывод на основе размеров диапазона в моем коде псевдокода.

выход

 [ [ {col}, {col} ], [ {col} ], [ {col} ]

Это неверный ввод. 100 | 50 | 50 | 100 | 100 Исходя из входных данных мой вывод должен быть

[ [ {col} ], [ {col}, {col} ], [ {col} ]

Кто-нибудь может помочь исправить мою математику. Или, может быть, лучший способ написать это.

Answer 1

Вы можете сделать это проще, используя метод reduce(), чтобы отслеживать совокупный span текущей строки, к которой вы добавляете каждый child в grid:

const array = [{ props: { span: 100 } }, { props: { span: 50 } }, { props: { span: 50 } }, { props: { span: 100 } }, { props: { span: 100 } }];
const grid = []
const maxSpan = 100

array.reduce((acc, child) => {
  const { span } = child.props
  const total = acc + span

  if (total > maxSpan) {
    grid.push([child])
    return span
  } else {
    grid[grid.length - 1].push(child)
    return total
  }
}, 100); // force reduce() to start a new row with first child

console.log(JSON.stringify(grid));

Ваша ошибка была связана с использованием index параметра forEach(), так как этот индекс напрямую не коррелирует с rowIndex иcolIndex в вашем зубчатом 2D-массиве.Не каждая строка имеет size столбцов в вашем grid.