The Leaning Tower of Pins — JavaScript Bug Hunt

Briefing

Inspired by every masonry grid that grew one giraffe column: round-robin placement ignores item heights, so a run of tall cards stacks into the same column and the layout tips over.

masonry.js must always drop the next item into the currently shortest column (ties → lowest index).

Bug report

BUG-MASONRY · Reported by: web platform

layout(heights, columns) -> { assignment, columnHeights }:

• each item goes to the column with the smallest current height
• ties break toward the lower column index

Observed: round-robin puts item 3 in column 0 even though column 1 is 5 units shorter — after a hundred pins the page is a staircase.

Logs

[grid] column heights after 40 pins: [3120, 1180]

The code as shipped

src/grid/masonry.js (editable)

// Assigns items (by height) to masonry columns.
exports.layout = function (heights, columns) {
  var columnHeights = [];
  for (var c = 0; c < columns; c++) columnHeights.push(0);
  var assignment = [];
  for (var i = 0; i < heights.length; i++) {
    var col = i % columns;
    assignment.push(col);
    columnHeights[col] += heights[i];
  }
  return { assignment: assignment, columnHeights: columnHeights };
};