我用一行代码搞定了重叠头像组

前言

最近项目有个新需求，需要把用户的头像水平排列并且重叠。本来以为挺麻烦的，刚开始还想着要用JS去计算每一个头像需要位移的距离。

其实这个需求只需要一行代码就能搞定。最终的效果图如下：

效果图

React代码

import React from "react";
import "./index.less";

const avatars = [
  "https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp",
  "https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp",
  "https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp",
  "https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp",
  "https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp",
  "https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp",
];

export default function AvatarPage() {
  return (
    <div className="avatar">
      {avatars.map((avatar) => {
        return <img className="avatar-item" src={avatar} alt="avatar" />;
      })}
    </div>
  );
}

.avatar {
  display: flex;
}

.avatar-item {
  height: 56px;
  width: 56px;
  border-radius: 100%;
  border: 4px solid #efefef;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  &:not(:first-child) {
    // 只需要加这行代码就能搞定
    margin-left: -24px;
  }
}