显示效果如下：

javascript圆形排列_css

需要用到的知识：

 

一个完整的圆的弧度是2π，所以2π rad = 360°，1 π rad = 180°，

我们平时用的sin(x); x为π/2是就相等于90°，为1.

sin,cos用弧度制方便一点。

var dotLeft = ($(".container").width()-$(".dot").width())/2; 为什么要减去$(".dot").width()
因为我们的圆心（中心点）也是一个div，不像上面画的就是一个点，中心div定位也是从左上角定位的。所有要减去。



<script type="text/javascript">
    $(function(){
        //中心点横坐标
        var dotLeft = ($(".container").width()-$(".dot").width())/2;
        //中心点纵坐标
        var dotTop = ($(".container").height()-$(".dot").height())/2;
        //起始角度
        var stard = 0;
        //半径
        var radius = 200;
        //每一个BOX对应的角度;
        var avd = 360/$(".box").length;
        //每一个BOX对应的弧度;
        var ahd = avd*Math.PI/180;

        console.log(Math.sin(ahd*2));
        console.log(Math.sin(ahd*6));

        console.log(Math.cos(ahd*2));
        console.log(Math.cos(ahd*3));


        //设置圆的中心点的位置
        $(".dot").css({"left":dotLeft,"top":dotTop});
        $(".box").each(function(index, element){
            $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
        });
    })
</script>
<style type="text/css">
*{margin:0;padding:0;}
.container{position:relative;width:700px;height:800px; margin:0 auto; border:1px solid #F00;}
.box{position:absolute;width:50px;height:50px;background:#000;}
.dot{ position:absolute;width:20px;height:20px;background:#F00;}
</style>
</head>
<body>
<div class="container">
    <div class="dot"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</body>