当前位置：首页 > React

react实现瀑布流

2026-01-27 06:58:38React

实现瀑布流布局的方法

使用React实现瀑布流布局可以通过CSS或JavaScript库来完成。以下是几种常见的方法：

使用CSS Grid或Flexbox

CSS Grid或Flexbox可以快速实现简单的瀑布流布局。这种方法适合内容高度差异不大的场景。

import React from "react";
import "./Waterfall.css";

const WaterfallGrid = ({ items }) => {
  return (
    <div className="waterfall-grid">
      {items.map((item, index) => (
        <div key={index} className="waterfall-item">
          <img src={item.image} alt={item.title} />
          <h3>{item.title}</h3>
        </div>
      ))}
    </div>
  );
};

export default WaterfallGrid;

对应的CSS文件：

.waterfall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 16px;
  grid-auto-rows: 10px;
}

.waterfall-item {
  grid-row-end: span 8;
}

使用Masonry布局库

对于更复杂的瀑布流需求，可以使用专门的Masonry布局库如react-masonry-css或masonry-layout。

安装react-masonry-css：

npm install react-masonry-css

实现代码：

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

const breakpointColumnsObj = {
  default: 4,
  1100: 3,
  700: 2,
  500: 1
};

const MasonryLayout = ({ items }) => {
  return (
    <Masonry
      breakpointCols={breakpointColumnsObj}
      className="my-masonry-grid"
      columnClassName="my-masonry-grid_column"
    >
      {items.map((item, index) => (
        <div key={index} className="masonry-item">
          <img src={item.image} alt={item.title} />
          <h3>{item.title}</h3>
        </div>
      ))}
    </Masonry>
  );
};

export default MasonryLayout;

对应的CSS文件：

.my-masonry-grid {
  display: flex;
  margin-left: -16px;
  width: auto;
}
.my-masonry-grid_column {
  padding-left: 16px;
  background-clip: padding-box;
}

.masonry-item {
  margin-bottom: 16px;
}

使用Intersection Observer实现懒加载

结合Intersection Observer API可以实现图片懒加载，优化瀑布流性能。

import React, { useRef, useEffect } from "react";

const LazyLoadWaterfall = ({ items }) => {
  const itemRefs = useRef([]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const img = entry.target.querySelector("img");
            img.src = img.dataset.src;
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.1 }
    );

    itemRefs.current.forEach((ref) => {
      if (ref) observer.observe(ref);
    });

    return () => {
      itemRefs.current.forEach((ref) => {
        if (ref) observer.unobserve(ref);
      });
    };
  }, []);

  return (
    <div className="waterfall-grid">
      {items.map((item, index) => (
        <div
          key={index}
          ref={(el) => (itemRefs.current[index] = el)}
          className="waterfall-item"
        >
          <img data-src={item.image} alt={item.title} />
          <h3>{item.title}</h3>
        </div>
      ))}
    </div>
  );
};

export default LazyLoadWaterfall;

动态计算高度实现精确瀑布流

对于需要精确计算每个项目位置的高级瀑布流，可以手动计算项目位置。

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

const DynamicWaterfall = ({ items, columns = 3 }) => {
  const [positions, setPositions] = useState([]);

  useEffect(() => {
    const columnHeights = new Array(columns).fill(0);
    const newPositions = items.map((item) => {
      const minHeight = Math.min(...columnHeights);
      const columnIndex = columnHeights.indexOf(minHeight);
      const top = minHeight;
      const left = (100 / columns) * columnIndex;

      // 假设每个项目高度为200px加上随机差异
      const height = 200 + Math.random() * 100;
      columnHeights[columnIndex] += height;

      return {
        top,
        left,
        height
      };
    });

    setPositions(newPositions);
  }, [items, columns]);

  return (
    <div className="waterfall-container" style={{ position: "relative" }}>
      {items.map((item, index) => (
        <div
          key={index}
          className="waterfall-item"
          style={{
            position: "absolute",
            top: `${positions[index]?.top || 0}px`,
            left: `${positions[index]?.left || 0}%`,
            width: `${100 / columns}%`,
            height: `${positions[index]?.height || 0}px`
          }}
        >
          <img src={item.image} alt={item.title} />
          <h3>{item.title}</h3>
        </div>
      ))}
    </div>
  );
};

export default DynamicWaterfall;

响应式设计考虑

为瀑布流添加响应式设计，可以通过媒体查询调整列数：

react实现瀑布流

@media (max-width: 768px) {
  .waterfall-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .waterfall-grid {
    grid-template-columns: 1fr;
  }
}