MUI Masonry组件加载更多时闪烁问题及替代方案咨询

一、消除/弱化闪烁的可行方案 #

1. 预定义图片宽高比 #

Masonry闪烁的核心是组件需要等待图片加载完成后才能获取真实高度，进而调整布局。提前给每个元素设置宽高比，让组件在渲染时就有准确的占位尺寸，避免后续重排：

// 假设你的galeryItems新增width和height字段
const galeryItems = [{url: "xxx", alt: "xxx", width: 800, height: 600}];

// 在motion.div中添加宽高比样式
<motion.div
  key={index}
  style={{
    opacity: 0,
    transform: "translateY(60px)",
    transition: `opacity 1s ease-in-out, transform 1s ease-in-out`,
    aspectRatio: `${item.width}/${item.height}`, // 关键：固定宽高比
    position: "relative"
  }}
  // ...其他属性
>
  <img
    src={item.url}
    alt={item.alt}
    loading="lazy"
    style={{
      borderRadius: "5px",
      display: "block",
      width: "100%",
      height: "100%",
      objectFit: "cover" // 保持图片比例
    }}
  />
</motion.div>

2. 关闭组件自动监听图片加载 #

MUI Masonry默认会监听图片加载状态并反复重排布局，关闭这个功能可以减少不必要的重绘：

<Masonry 
  columns={isBelowWidth ? 2 : 3} 
  spacing={1}
  disableImagesLoaded={true} // 关闭自动监听图片加载
>
  {/* 子元素 */}
</Masonry>

配合图片的onLoad事件，手动控制元素的显示时机，确保布局只在必要时更新。

3. 骨架屏占位 #

在图片加载完成前，显示与图片宽高比一致的骨架屏，让Masonry基于骨架屏的高度计算布局，图片加载完成后直接替换，避免高度突变：

const GaleryItem = ({ item, index }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <motion.div
      key={index}
      style={{
        opacity: 0,
        transform: "translateY(60px)",
        transition: `opacity 1s ease-in-out, transform 1s ease-in-out`,
        aspectRatio: `${item.width}/${item.height}`,
        position: "relative"
      }}
      animate={{ opacity: 1, transform: "translateY(0px)" }}
      transition={{
        opacity: { duration: 0.3, delay: (index % 10) * 0.1 },
        transform: { duration: 0.3, delay: (index % 10) * 0.1 }
      }}
    >
      {/* 骨架屏 */}
      {!isLoaded && (
        <div style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          backgroundColor: "#f5f5f5",
          borderRadius: "5px"
        }} />
      )}
      <img
        src={item.url}
        alt={item.alt}
        loading="lazy"
        style={{
          borderRadius: "5px",
          display: "block",
          width: "100%",
          height: "100%",
          objectFit: "cover",
          opacity: isLoaded ? 1 : 0
        }}
        onLoad={() => setIsLoaded(true)}
      />
    </motion.div>
  );
};

二、为什么测量高度时元素默认不隐藏 #

MUI Masonry的瀑布流布局依赖元素的实际渲染高度来计算每列的高度分布，如果元素默认隐藏，组件无法获取正确的offsetHeight等尺寸数据，会导致布局完全错乱。因此组件设计时强制元素处于可见状态，确保测量的准确性。

三、替代库/组件推荐 #

1. react-masonry-css #

基于CSS Grid实现的瀑布流，无需JavaScript动态测量高度，通过媒体查询控制列数，性能更稳定，不会出现测量导致的闪烁：

import Masonry from 'react-masonry-css';

// 定义响应式断点
const breakpoints = {
  default: 3,
  600: 2
};

// 渲染组件
<Masonry
  breakpointCols={breakpoints}
  className="masonry-grid"
  columnClassName="masonry-grid__column"
>
  {galeryItems.slice(0, maxShownItems).map((item, index) => (
    <GaleryItem key={index} item={item} index={index} />
  ))}
</Masonry>

配合基础CSS：

.masonry-grid {
  display: flex;
  margin-left: -10px;
  width: auto;
}
.masonry-grid__column {
  padding-left: 10px;
  background-clip: padding-box;
}

2. 自定义CSS Grid瀑布流 #

使用CSS Grid的masonry布局模式（目前Firefox支持，需加前缀），无需JavaScript即可实现瀑布流：

.masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: masonry;
  gap: 10px;
}

这种方式完全由CSS控制布局，不会有任何JavaScript导致的闪烁问题。

内容的提问来源于stack exchange，提问作者Laczkó Örs