react-masonry-component2/es/masonry/masonry-flex/utils.js

react 的瀑布流组件库，支持 columns 布局、弹性布局、绝对定位布局三种方法实现

import { minBy } from 'lodash-es';
import React from 'react';

var getColumns = function (children, columnCount) {
    var columns = Array.from({ length: columnCount }, function () { return ({
        children: [],
    }); });
    React.Children.forEach(children, function (child, index) {
        if (child && React.isValidElement(child)) {
            columns[index % columnCount].children.push(child);
        }
    });
    return columns;
};
var getColumnsSortWithHeight = function (children, columnCount) {
    var columns = Array.from({ length: columnCount }, function () { return ({
        height: 0,
        children: [],
    }); });
    React.Children.forEach(children, function (child, index) {
        if (child && React.isValidElement(child)) {
            if (index < columns.length) {
                columns[index % columnCount].children.push(child);
                columns[index % columnCount].height += child.props.height;
                return;
            }
            var minHeightColumn = minBy(columns, function (a) { return a.height; });
            minHeightColumn.children.push(child);
            minHeightColumn.height += child.props.height;
        }
    });
    return columns;
};

export { getColumns, getColumnsSortWithHeight };