Masonry list with FlexBox Nextjs Reactjs using SCSS Module

Giải pháp:

• Chia mảng đang có thành mảng đa chiều tương ứng với số cột
• Sử dụng flexbox, dùng thuộc tính gap , và chia kích thước width theo item công thức như sau:

calc(100% / $column - $gap * (($column - 1) / $column))

• demo code: https://abi.sshop.live/masonry

Dùng thư viện bạn sẽ bị hạn chế về chiều cao của phần tử. ví dụ như masonry hình ảnh, .... Tui đã thử với số lượng lớn items : 9999 thì thư viện cũng không load nỗi

dùng SCSS để giải quyết: nhiêu code đây là đủ

.isScrolling {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

Cách dùng:

'use client';
import { filter, map, slice } from 'lodash';
import {
    CSSProperties,
    Fragment,
    Suspense,
    memo,
    useEffect,
    useMemo,
    useState,
} from 'react';
import styles from './styles.module.scss';

export default memo(function Test() {
    const [limit, setLimit] = useState(50);

    const column = 5;
    const list = map(Array.from({ length: 9999 }).fill(0), (_, idx) => {
        return {
            label: idx,
            image: 'https://source.unsplash.com/random?t=' + idx,
        };
    });

    const columnItems = Array.from({ length: column }, (_, colIndex) =>
        filter(slice(list, 0, limit), (_, index) => index % column === colIndex)
    );

    const handleScroll = () => {
        const boxList = document.getElementById('cover');
        const listItem = document.getElementById('list');

        if (boxList && listItem) {
            if (
                boxList.scrollTop + boxList.clientHeight >=
                listItem.offsetHeight
            ) {
                setLimit((prev) => prev + 150);
            }
        }
    };

    useEffect(() => {
        window.addEventListener('wheel', handleScroll);

        return () => {
            window.removeEventListener('wheel', handleScroll);
        };
    }, [handleScroll]);

    return (
        <div className={styles.Container}>
            <div className={styles.block}>
                <div className={styles.isScrolling} id="cover">
                    <ul
                        id="list"
                        className={styles.list}
                        style={{ '--column': column } as CSSProperties}
                    >
                        {map(columnItems, (column, columnID) => {
                            return (
                                <Fragment key={columnID}>
                                    <Suspense fallback={<p>Loading...</p>}>
                                        <RenderColumn column={column} />
                                    </Suspense>
                                </Fragment>
                            );
                        })}
                    </ul>
                </div>
            </div>
        </div>
    );
});

const RenderColumn = memo(({ column }: { column: any[] }) => {
    return (
        <li className={styles.column}>
            {map(column, (row, rowID) => {
                return (
                    <Fragment key={rowID}>
                        <Suspense fallback={<p>Loading...</p>}>
                            <RenderRow row={row} />
                        </Suspense>
                    </Fragment>
                );
            })}
        </li>
    );
});

const RenderRow = memo(({ row }: any) => {
    return (
        <div className={styles.row}>
            <Suspense fallback={<p>Loading...</p>}>
                {useMemo(
                    () => (
                        <RenderItem item={row} />
                    ),
                    [row]
                )}
            </Suspense>
        </div>
    );
});

const RenderItem = memo(({ item }: any) => {
    return (
        <div className={styles.card}>
            <picture>
                <img src={item.image} alt="" />
            </picture>
            <p>label: {item.label}</p>
        </div>
    );
});

SCSS cho nó:

.Container {
    padding: 1rem;
    display: flex;
    flex: 1;
    .block {
        position: relative;
        display: flex;
        flex: 1;
        margin: -1rem;
        $gap: 1rem;
        .list {
            $column: var(--column);
            padding: 1rem;
            width: 100%;
            list-style: none;
            display: flex;
            gap: $gap;
            .column {
                width: calc(100% / $column - $gap * (($column - 1) / $column));
                display: flex;
                flex-direction: column;
                gap: $gap;
                .row {
                    .card {
                        padding: 1rem;
                        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
                        border-radius: 0.5rem;
                        picture {
                            img {
                                width: 100%;
                                border-radius: 0.5rem;
                                object-fit: cover;
                                object-position: center;
                            }
                        }
                    }
                }
            }
        }
    }
}