当前位置：首页 > React

react 实现瀑布流

2026-01-27 01:40:36React

实现瀑布流布局的方法

React 中实现瀑布流布局可以通过多种方式，以下是几种常见的方法：

使用 CSS Grid 或 Flexbox

CSS Grid 或 Flexbox 可以用于实现简单的瀑布流布局，但需要手动计算高度或使用 JavaScript 动态调整。以下是一个使用 CSS Grid 的示例：

import React, { useState, useEffect } from 'react';

const WaterfallGrid = ({ items }) => {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
      {items.map((item, index) => (
        <div key={index} style={{ backgroundColor: '#f0f0f0', padding: '16px', borderRadius: '8px' }}>
          {item.content}
        </div>
      ))}
    </div>
  );
};

使用 Masonry 布局库

Masonry 是一个流行的瀑布流布局库，可以自动调整元素位置。以下是如何在 React 中使用 react-masonry-css：

import React from 'react';
import Masonry from 'react-masonry-css';

const WaterfallMasonry = ({ items }) => {
  const breakpointColumnsObj = {
    default: 3,
    1100: 2,
    700: 1,
  };

  return (
    <Masonry
      breakpointCols={breakpointColumnsObj}
      className="my-masonry-grid"
      columnClassName="my-masonry-grid_column"
    >
      {items.map((item, index) => (
        <div key={index} style={{ marginBottom: '16px' }}>
          {item.content}
        </div>
      ))}
    </Masonry>
  );
};

动态计算高度

如果需要更精细的控制，可以通过 JavaScript 动态计算元素高度并调整布局：

import React, { useState, useEffect, useRef } from 'react';

const DynamicWaterfall = ({ items }) => {
  const containerRef = useRef(null);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const calculateLayout = () => {
      const containerWidth = containerRef.current.offsetWidth;
      const columnCount = Math.floor(containerWidth / 250); // 假设每个列宽 250px
      const newColumns = Array(columnCount).fill().map(() => []);

      items.forEach((item, index) => {
        const shortestColumn = newColumns.reduce((prev, curr, i) => 
          curr.height < prev.height ? { index: i, height: curr.height } : prev, 
          { index: 0, height: 0 }
        );
        newColumns[shortestColumn.index].push(item);
      });

      setColumns(newColumns);
    };

    calculateLayout();
    window.addEventListener('resize', calculateLayout);
    return () => window.removeEventListener('resize', calculateLayout);
  }, [items]);

  return (
    <div ref={containerRef} style={{ display: 'flex', gap: '16px' }}>
      {columns.map((column, colIndex) => (
        <div key={colIndex} style={{ flex: 1 }}>
          {column.map((item, itemIndex) => (
            <div key={`${colIndex}-${itemIndex}`} style={{ marginBottom: '16px' }}>
              {item.content}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

使用现成的 React 组件库

一些 UI 库（如 Ant Design）提供了瀑布流组件，可以直接使用：

react 实现瀑布流

import React from 'react';
import { Waterfall } from 'antd';

const AntdWaterfall = ({ items }) => {
  return (
    <Waterfall
      columnWidth={200}
      gutter={16}
      data={items}
      renderItem={(item) => (
        <div style={{ backgroundColor: '#f0f0f0', padding: '16px', borderRadius: '8px' }}>
          {item.content}
        </div>
      )}
    />
  );
};