如何用Flexbox实现数组中图片的高低交替排列效果

我有一个ImageList对象数组，想要通过Flexbox实现图片高低交替排列的效果（图片从左到右排列），效果如下：

实现步骤 #

1. 安装styled-components
   执行以下命令安装依赖：
   npm install --save styled-components

2. 核心实现思路
   利用Flexbox的align-self属性控制图片项的垂直对齐位置，结合奇偶索引设置不同的图片高度（或直接使用图片原始高度），从而形成高低交替的视觉效果。

3. 代码实现
   首先定义样式组件：

import styled from 'styled-components';

// 图片容器，使用Flex布局
const ImageContainer = styled.div`
  display: flex;
  align-items: center; /* 基础对齐方式，为交替对齐提供基准 */
  gap: 16px; /* 图片间的间距 */
  padding: 20px;
  flex-wrap: wrap; /* 可选：图片过多时自动换行 */
`;

// 图片项，根据奇偶索引设置不同样式
const ImageItem = styled.img<{isEven: boolean}>`
  width: 150px; /* 统一图片宽度，保证布局整齐 */
  height: ${props => props.isEven ? '200px' : '280px'}; /* 交替设置高度 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
  align-self: ${props => props.isEven ? 'flex-end' : 'flex-start'}; /* 交替对齐位置 */
`;

然后在业务组件中使用：

// 假设你的ImageList类型定义
interface ImageList {
  id: number;
  url: string;
}

const App = () => {
  // 模拟的图片数组
  const imageList: ImageList[] = [
    { id: 1, url: 'https://picsum.photos/150/280' },
    { id: 2, url: 'https://picsum.photos/150/200' },
    { id: 3, url: 'https://picsum.photos/150/280' },
    { id: 4, url: 'https://picsum.photos/150/200' },
  ];

  return (
    <ImageContainer>
      {imageList.map((item, index) => (
        <ImageItem
          key={item.id}
          src={item.url}
          alt={`image-${item.id}`}
          isEven={index % 2 === 1} // 通过索引判断奇偶项
        />
      ))}
    </ImageContainer>
  );
};

export default App;

补充说明 #

• 如果图片本身带有不同的原始高度，可以去掉手动设置的height属性，仅通过align-self: flex-start/flex-end控制对齐位置，同样能实现错落的交替效果。
• 若需要换行后仍保持交替规律，可以调整flex-wrap和对齐逻辑，或者结合媒体查询适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者MeAtWork