Reactjs 砖石状布局，无冲击和反作用力

我正在尝试使用CSS网格和从非Flash API获取的数据来实现图像布局。这是模拟图像数据：

export const data = [
  {
    image:
      "https://images.unsplash.com/photo-1614599092342-f9e59e1e8e2c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "dsadads"
  },
  {
    image:
      "https://images.unsplash.com/photo-1615808437349-0701fbd6b21d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "green trees and plants under white sky during daytime"
  },
  {
    image:
      "https://images.unsplash.com/photo-1617294799806-5d92e54a80d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "blue white and red abstract painting"
  },
  {
    image:
      "https://images.unsplash.com/photo-1616011638835-9c90df31baea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "green plant on white ceramic pot on brown wooden table"
  },
  {
    image:
      "https://images.unsplash.com/photo-1615065761158-5ff70b43f0fb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "person in black jacket driving car"
  },
  {
    image:
      "https://images.unsplash.com/photo-1616998058886-da192a3d7fef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "person in white pants wearing white nike sneakers"
  },
  {
    image:
      "https://images.unsplash.com/photo-1616948048805-fc6a0f83c3f0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "white ceramic bathtub with stainless steel faucet"
  },
  {
    image:
      "https://images.unsplash.com/photo-1615831028028-46a7ba3a5f52?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "woman in spaghetti strap top"
  },
  {
    image:
      "https://images.unsplash.com/photo-1615439885342-1b7d8ba4f547?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "man holding brown wooden board"
  },
  {
    image:
      "https://images.unsplash.com/photo-1615439885342-1b7d8ba4f547?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "man holding brown wooden board"
  },
  {
    image:
      "https://images.unsplash.com/photo-1616868560403-b4675d3a545b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "silver imac on brown wooden desk"
  },
  {
    image:
      "https://images.unsplash.com/photo-1616868560403-b4675d3a545b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "silver imac on brown wooden desk"
  },
  {
    image:
      "https://images.unsplash.com/photo-1616600982528-62126e0c46d8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt:
      "man in black jacket and black pants standing on snow covered ground near dome building during"
  },
  {
    image:
      "https://images.unsplash.com/photo-1615826324871-a2b88293dde2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxODkyMzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MTczNTEyMjk&ixlib=rb-1.2.1&q=80&w=1080",
    alt: "brown dried leaves in close up photography"
  }
];

这是我的CSS：

.images-wrapper {
  display: grid;
  grid-column-gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.image-item {
  display: grid;
  row-gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

img {
  width: 100%;
}

这就是组件本身：

import { data } from "./data";

import "./styles.css";

export default function App() {
  return (

    <div className="images-wrapper">
      <div className="image-item">
      {data.slice(0, 4).map((k) => {
        return (    
            <img src={k.image} />    
        )
      })}
      </div>
      <div className="image-item">
      {data.slice(5, 9).map((k) => {
        return (
          
            <img src={k.image} />
         
        )
      })}
      </div>
      <div className="image-item">
      {data.slice(10, 14).map((k) => {
        return (
          
            <img src={k.image} />
         
        )
      })}
      </div>
    
    </div>
  );
}

从“/data”导入{data}；
导入“/styles.css”；
导出默认函数App（）{
返回(
{data.slice（0,4）.map（（k）=>{
报税表（
)
})}
{data.slice（5,9）.map（（k）=>{
返回(
)
})}
{data.slice（10，14）.map（（k）=>{
返回(
)
})}
);
}

没有

.slice（）