Question

我有一个构建的网格，但是它不能完全正确地工作。看起来我的数学可能有点差了。

所以我的输入数据只是下面的伪代码数组。但是只要知道它是由多个React组件组成的，并且这些对象都有一个称为span的属性，就会根据对象本身进行更改。

伪代码数据输入

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

我想创建一个多维数组，其输出与输入范围值匹配。我的意思是，如果span是100，那么它应该在其中创建带有一行的行。如果下一个孩子的跨度prop值为50，则应创建一个新行并将该孩子添加到该行。如果下面的数字是50，则应该不创建新行，而是，只需将该新子项添加到最后一行中的第二个跨度中，等等...

因此，基本上所有100个跨度都应位于自己的行和跨度中。任何50个跨度应在单独的跨度中排成一排。

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

外部数组表示网格，内部括号为行，内部括号为cols。如上所述，此结构根据跨度大小而变化。现在的网格是2 x 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()方法来跟踪将var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src('./scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css')); }); gulp.task('watch', function () { gulp.watch('./scss/**/*.scss', ['sass']) });附加到$("#datepicker").kendoDatePicker();中的当前行的累积span，可以使操作变得更加容易：

child

您的错误与使用forEach()的grid参数有关，因为该索引与锯齿状2D数组中的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不直接相关。并非每一行都有rowIndex的{{1}}列。

JS中的动态网格

1 个答案: