先上效果图：

环状布局指的是，外层几个圆（为了方便，下文都叫外圆）围着中心圆，外圆的圆心都在一个圆上。

有几个关键的变量：

• dis: 外圆到中心圆的距离
• degree: 外圆切分每一份的角度（图中8个外层圆，= 360 / 8 ）
• bigR: 容器大圆的半径

如下图：

我们要得到每个外圆的left,top去定位，就得用大圆的半径去减掉如下图的，dis * sinθ 或则 dis * cosθ

关键代码：
     el.style.left = bigR - distance * Math.sin((degree * i * Math.PI) / 180) - parseFloat(pre) + "px";
     el.style.top = bigR - distance * Math.cos((degree * i * Math.PI) / 180) - parseFloat(pre) + "px";

其中的pre，是因为大圆还有边框的粗细存在，需要减去这些偏移量。

dis、外圆的数量（决定degree）、外圆的宽高都可以进行调整 来传参。

github地址： github.com/guoyanlun08…