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

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

import { useMemo, useState, useCallback, useEffect } from 'react';
import { DEFAULT_COLUMNS_COUNT } from '../const.js';

var useHasMounted = function () {
    var _a = useState(false), hasMounted = _a[0], setHasMounted = _a[1];
    useEffect(function () {
        setHasMounted(true);
    }, []);
    return hasMounted;
};
var useWindowWidth = function () {
    var hasMounted = useHasMounted();
    var _a = useState(0), width = _a[0], setWidth = _a[1];
    var handleResize = useCallback(function () {
        if (!hasMounted)
            return;
        setWidth(window.innerWidth);
    }, [hasMounted]);
    useEffect(function () {
        if (hasMounted) {
            window.addEventListener('resize', handleResize);
            handleResize();
            return function () { return window.removeEventListener('resize', handleResize); };
        }
    }, [hasMounted, handleResize]);
    return width;
};
var useColumnCount = function (columnsCountBreakPoints) {
    var windowWidth = useWindowWidth();
    var columnCount = useMemo(function () {
        var breakPoints = Object.keys(columnsCountBreakPoints).sort(function (a, b) { return a - b; });
        var count = breakPoints.length > 0
            ? columnsCountBreakPoints[breakPoints[0]]
            : DEFAULT_COLUMNS_COUNT;
        breakPoints.forEach(function (breakPoint) {
            if (breakPoint < windowWidth) {
                count = columnsCountBreakPoints[breakPoint];
            }
        });
        return count;
    }, [windowWidth, columnsCountBreakPoints]);
    return columnCount;
};

export { useColumnCount, useHasMounted, useWindowWidth };