如何使用CSS/JS实现元素沿圆形父容器环形等距排列

核心实现逻辑基于极坐标转直角坐标规则：以圆形父容器的圆心为坐标原点，根据子元素总个数算出相邻元素的间隔角度，结合预设的排布半径，算出每个子元素相对于圆心的偏移量，即可实现任意数量子元素的等距环形排布。

方案1：纯CSS实现（适合子元素数量固定的场景） #

实现步骤：

• 父容器设置相对定位，定义固定宽高与圆形样式，圆心位置为宽高的1/2处
• 子元素统一设置绝对定位，初始位置对齐父容器圆心
• 按子元素总数n计算单个元素的间隔角度为360deg / n，通过transform属性先将元素旋转对应角度，沿纵轴偏移排布半径的距离，最后反向旋转相同角度抵消元素自身的倾斜，保证子元素保持正向显示

以5个正方形子元素为例，代码如下：

.circle-parent {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #f0f0f0;
  /* 自定义排布半径，值越小子元素离圆心越近 */
  --layout-radius: 160px;
}
.circle-child {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #2196f3;
  /* 子元素初始位置对齐父容器圆心 */
  left: calc(50% - 20px);
  top: calc(50% - 20px);
}
/* 逐个设置子元素角度 */
.circle-child:nth-child(1) { transform: rotate(0deg) translateY(calc(var(--layout-radius) * -1)) rotate(0deg); }
.circle-child:nth-child(2) { transform: rotate(72deg) translateY(calc(var(--layout-radius) * -1)) rotate(-72deg); }
.circle-child:nth-child(3) { transform: rotate(144deg) translateY(calc(var(--layout-radius) * -1)) rotate(-144deg); }
.circle-child:nth-child(4) { transform: rotate(216deg) translateY(calc(var(--layout-radius) * -1)) rotate(-216deg); }
.circle-child:nth-child(5) { transform: rotate(288deg) translateY(calc(var(--layout-radius) * -1)) rotate(-288deg); }

该方案缺点是子元素数量变化时需要手动重写CSS规则，灵活性较差。

方案2：JS动态计算（推荐，扩展性强） #

该方案可自动适配3个、5个、6个等任意数量的子元素，子元素增删后重新调用计算函数即可自动完成排布，无需手动修改样式。
核心逻辑：

• 遍历所有子元素，按总数计算每个元素对应的弧度值
• 通过三角函数计算每个子元素的横纵偏移值：x = 排布半径 * cos(弧度)、y = 排布半径 * sin(弧度)
• 直接给子元素设置偏移值即可，元素本身不会发生旋转，无需额外做角度抵消

代码示例：

<div class="circle-parent" id="circleParent">
  <div class="circle-child"></div>
  <div class="circle-child"></div>
  <div class="circle-child"></div>
  <div class="circle-child"></div>
  <div class="circle-child"></div>
  <!-- 任意增减子元素都可自动适配 -->
</div>

<style>
.circle-parent {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #f0f0f0;
}
.circle-child {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #2196f3;
  /* 子元素初始定位在圆心 */
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
}
</style>

<script>
function arrangeInCircle() {
  const parent = document.getElementById('circleParent');
  const children = parent.querySelectorAll('.circle-child');
  const childCount = children.length;
  const parentRadius = parent.offsetWidth / 2;
  const childRadius = children[0].offsetWidth / 2;
  // 计算实际排布半径，留10px内边距防止子元素超出父容器
  const layoutRadius = parentRadius - childRadius - 10;

  children.forEach((child, index) => {
    // 初始角度减90度是为了让第一个子元素显示在正上方，和参考效果对齐
    const angle = (Math.PI * 2 / childCount) * index - Math.PI / 2;
    const offsetX = layoutRadius * Math.cos(angle);
    const offsetY = layoutRadius * Math.sin(angle);
    child.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
  });
}
// 页面加载完成后执行排布，子元素数量变化时重新调用该函数即可
window.onload = arrangeInCircle;
</script>

若需要实现子元素围绕圆心旋转的动画，直接给父容器添加旋转动画即可；如果需要子元素自身保持正向不随父容器旋转，给子元素添加同速反向的旋转动画就能抵消旋转效果。

自定义调整说明：

• 修改layoutRadius的数值可以调整子元素和圆心的距离
• 修改angle计算的初始偏移角度，可以调整第一个子元素的起始位置
• 该逻辑对子元素的形状没有要求，正方形、圆形、其他异形元素只要尺寸统一都能正常排布

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