如何在多层嵌套圆形边框上随机放置图片？

API 探路者

2026-7-22

实现多层嵌套圆形边框上的图片随机摆放

我正尝试在多层嵌套圆形边框上随机放置图片，恳请帮助！提前致谢

预期效果示意图：
Expected result

如何实现如上图所示的图片随机位置摆放？

以下是我目前的代码：

HTML：不介意修改结构，只要能实现功能即可。
CSS：这只是我尝试的其中一种方法，我已花费约2小时调试仍未解决问题。

.first {
  border: 2px solid #D9DFE7;
  width: 385px;
  height: 385px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 40px;
  margin-left: 40px;
}

.img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: -1.1rem;
}

.second {
  border: 2px solid #D9DFE7;
  width: 301px;
  height: 301px;
  border-radius: 50%;
  margin: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.imgSecond {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: -1.1rem;
}

.third {
  border: 2px solid #D9DFE7;
  height: 215px;
  width: 215px;
  border-radius: 50%;
  margin: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.imgThird {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: -1.1rem;
}

.forth {
  border: 2px solid #D9DFE7;
  height: 133px;
  width: 133px;
  border-radius: 50%;
  margin: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.imgForth {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: -1.1rem;
}

.fifth {
  width: 49px;
  height: 49px;
  border: 2px solid #D9DFE7;
  border-radius: 50%;
  margin: 2.5%;
}

<div class="first">
  <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="img" />

  <div class="second">
    <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgSecond" />

    <div class="third">
      <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgThird" />

      <div class="forth">
        <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgForth" />
        <div class="fifth"></div>
      </div>
    </div>
  </div>
</div>

解决方案

实现思路

通过CSS定位+旋转结合JS生成随机角度，让图片均匀随机分布在各层圆形边框上，同时优化代码结构减少冗余。

优化后代码

HTML结构

<div class="circle-wrapper">
  <div class="circle circle-layer-1">
    <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="circle-img" />
    <div class="circle circle-layer-2">
      <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="circle-img" />
      <div class="circle circle-layer-3">
        <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="circle-img" />
        <div class="circle circle-layer-4">
          <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="circle-img" />
          <div class="circle circle-layer-5"></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS样式

.circle-wrapper {
  margin: 40px;
}

.circle {
  border: 2px solid #D9DFE7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* 旋转时保持圆心位置不变 */
  transform-origin: center center;
}

/* 各层圆形尺寸 */
.circle-layer-1 {
  width: 385px;
  height: 385px;
}
.circle-layer-2 {
  width: 301px;
  height: 301px;
}
.circle-layer-3 {
  width: 215px;
  height: 215px;
}
.circle-layer-4 {
  width: 133px;
  height: 133px;
}
.circle-layer-5 {
  width: 49px;
  height: 49px;
}

.circle-img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  /* 让图片中心对齐圆形边框顶部 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}

JS随机角度逻辑

// 获取所有圆形图片元素
const circleImgs = document.querySelectorAll('.circle-img');

// 遍历每个图片，给其父级圆形设置随机旋转角度
circleImgs.forEach(img => {
  // 生成0-360度之间的随机整数角度
  const randomDegree = Math.floor(Math.random() * 360);
  img.parentElement.style.transform = `rotate(${randomDegree}deg)`;
});

核心说明

结构优化：把重复样式合并到.circle类，用单独类区分各层尺寸，减少代码冗余。
定位逻辑：图片默认定位在圆形顶部中心，通过旋转父级圆形，实现图片绕圆心随机分布。
随机角度：JS生成0-360度随机值，给每个父级圆形设置旋转，确保图片位置完全随机。

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