Как распределить элементы по высоте в трех колонках?

Question

[Станислав]

Я пытаюсь сделать на странице вертикальную каменную кладку.
На данный момент элементы распределяются делением массива на равные части элементов
Вот так

// columnsCount = 3
        var columns = Array.from({
            length: columnsCount
        }, function () {
            return [];
        });
        React.Children.forEach(children, function (child, index) {
            if (child && React.isValidElement(child)) {
                columns[index % columnsCount].push(child); 
            }
        });

Проблема в том что по мере подгрузки контента колонки наполняются не по высоте, а по количеству элементов в массиве, что в последствии приводит к слишком разным высотам этих трех колонок.

У каждого элемента есть объект с данными, в котором находится информация о его высоте.
Вот пример

React.Children.forEach(children, function (child, index) {
            if (child && React.isValidElement(child)) {
                const { height } = child.props; // Высота элемента, например 350 или 420
                columns[index % columnsCount].push(child); 
            }
        });

Как мне раскидать элементы по трем массивам с учетом высоты элементов?

Answer 1

[Станислав]

Попробовал узнать индекс с минимальным значением, для этого создал дополнительный массив и суммировал высоту элементов по индексу, но ничего не вышло
Вот пример

// Дополнительный массив
        var columnsHeight = Array.from({
            length: columnsCount
        }, function () {
            return [];
        });

        React.Children.forEach(children, function (child, index) {

            if (child && React.isValidElement(child)) {
                const { sizeHeight } = child.props.document;
                columnsHeight[index % columnsCount] = +columnsHeight[index % columnsCount] + sizeHeight

                var minIndex = columnsHeight.indexOf(Math.min.apply(null, columnsHeight));
                if (columns[minIndex]) {
                    columns[minIndex].push(child)
                }
                //columns[index % columnsCount].push(child);
            }
        });

Распределяет не правильно, может где то ошибку допустил?