react-masonry-component2/es/masonry/masonry-absolute/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 { useRef } from 'react';
import { DEFAULT_GUTTER } from '../const.js';
import { getListAndHeight } from './utils.js';

var MasonryAbsolute = function (props) {
    var children = props.children, className = props.className, style = props.style, _a = props.gutter, gutter = _a === void 0 ? DEFAULT_GUTTER : _a, columnCount = props.columnCount;
    var ref = useRef(null);
    var _b = getListAndHeight({
        children: children,
        columnCount: columnCount,
        wrapRef: ref,
        gutter: gutter,
    }), list = _b.list, height = _b.height;
    return (jsx("div", __assign({ className: classNames(["masonry-absolute-wrap ", className]), style: __assign({ gap: gutter, height: height }, style), ref: ref }, { children: list.map(function (i, index) {
            return (jsx("div", __assign({ className: "masonry-absolute-item", style: i.style }, { children: i.node }), index));
        }) })));
};

export { MasonryAbsolute as default };