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

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

import { __assign } from '../../node_modules/tslib/tslib.es6.js';
import { jsx } from 'react/jsx-runtime';
import './index.scss.js';
import classNames from 'classnames';
import { DEFAULT_GUTTER } from '../const.js';
import { getColumnsSortWithHeight, getColumns } from './utils.js';

var MasonryFlex = function (props) {
    var children = props.children, columnCount = props.columnCount, className = props.className, style = props.style, _a = props.gutter, gutter = _a === void 0 ? DEFAULT_GUTTER : _a, sortWithHeight = props.sortWithHeight;
    return (jsx("div", __assign({ className: classNames(["masonry-flex-wrap", className]), style: __assign({ gap: gutter }, style) }, { children: (sortWithHeight
            ? getColumnsSortWithHeight(children, columnCount)
            : getColumns(children, columnCount)).map(function (column, i) { return (jsx("div", __assign({ className: "masonry-flex-wrap-column", style: {
                gap: gutter,
            } }, { children: column.children.map(function (item) { return item; }) }), i)); }) })));
};

export { MasonryFlex as default };