React MUI，如何附加到砌体图像列表答案

【问题标题】：React MUI, How to append to a Masonry Image ListReact MUI，如何附加到砌体图像列表
【发布时间】：2022-08-24 11:30:11
【问题描述】：

我正在尝试将React MUI Masonry Image List 组件与infintie scroll 组件一起使用。他们似乎合作得很好。

但是，我遇到的问题是附加到砌体图像列表中。我成功地附加了新图像，但是当加载新图像时，整个砌体移动跳跃并变得紧张。

我想知道是否有可能只是将图像添加到页面底部而不会使整个事情变得一团糟。

这是说明这一点的代码，基本上我只是修改了砌体图像列表演示：

import * as React from \'react\';
import Box from \'@mui/material/Box\';
import ImageList from \'@mui/material/ImageList\';
import ImageListItem from \'@mui/material/ImageListItem\';
import InfiniteScroll from \"react-infinite-scroll-component\";
import { useEffect, useState } from \"react\";


export default function MasonryImageList() {

  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
  const [items, setItems] = useState([]);
  const fetchMore = async (itemData) =>{
      await sleep(2000)
      setItems(prev_items => [...prev_items,...itemData])
  }

  useEffect(() => {
    fetchMore(itemData);
  }, []);


  return (
    <Box id=\"scrolableDiv\" sx={{ width: 800, height: 800, overflowY: \'scroll\' }}>
      <ImageList variant=\"masonry\" cols={3} gap={8}>
      <InfiniteScroll
          dataLength={items.length}
          next={fetchMore(itemData)}
          hasMore={true}
          loader={<h4>Loading...</h4>}
          scrollableTarget= \"scrolableDiv\"
        >
        {items.map((item) => (
          <ImageListItem key={item.img}>
            <img
              src={`${item.img}?w=248&fit=crop&auto=format`}
              srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
              alt={item.title}
              loading=\"lazy\"
            />
          </ImageListItem>
          
        ))}
        </InfiniteScroll>
      </ImageList>
    </Box>
  );
}

const itemData = [
  {
    img: \'https://images.unsplash.com/photo-1549388604-817d15aa0110\',
    title: \'Bed\',
  },
  {
    img: \'https://images.unsplash.com/photo-1525097487452-6278ff080c31\',
    title: \'Books\',
  },
  {
    img: \'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6\',
    title: \'Sink\',
  },
  {
    img: \'https://images.unsplash.com/photo-1563298723-dcfebaa392e3\',
    title: \'Kitchen\',
  },
  {
    img: \'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3\',
    title: \'Blinds\',
  },
  {
    img: \'https://images.unsplash.com/photo-1574180045827-681f8a1a9622\',
    title: \'Chairs\',
  },
  {
    img: \'https://images.unsplash.com/photo-1530731141654-5993c3016c77\',
    title: \'Laptop\',
  },
  {
    img: \'https://images.unsplash.com/photo-1481277542470-605612bd2d61\',
    title: \'Doors\',
  },
  {
    img: \'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7\',
    title: \'Coffee\',
  },
  {
    img: \'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee\',
    title: \'Storage\',
  },
  {
    img: \'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62\',
    title: \'Candle\',
  },
  {
    img: \'https://images.unsplash.com/photo-1519710164239-da123dc03ef4\',
    title: \'Coffee table\',
  },
];

如果你发现任何明显的错误，请指出，我刚刚开始使用 React。

同样的事情发生在我身上，希望有人能尽快提出解决方案。
你找到解决方案了吗？

标签： javascript reactjs material-ui infinite-scroll

【解决方案1】：

我遇到过类似的问题。对我有用的是为 <img> 提供最小高度值。

IE。

<img
  src={`${item.img}?w=248&fit=crop&auto=format`}
  srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
  alt={item.title}
  loading="lazy"
  style={{ minHeight: 10 }}   //Added minHeight; 10 is just a sample value
/>

由于砌体列表取决于元素的高度，因此当 img 尚未加载时，minHeight 用作占位符值。

【讨论】：