效果圖：javascript
1、分析圖：css
綠色邊框內：外層的DIV元素,相對定位;html
白色圓形框：輔助分析的想象形狀;java
白點：爲白色圓形的圓心點，中心點，點o;函數
圓心角：角NOG;post
黃色：須要按圓形排列的，絕對定位的DIV元素;this
紅色點：爲每一個黃色DIV的座標點;即絕對定位時的元素，left值 和 top值 ，設置的點;url
2、涉及到的概念定義：spa
2.一、弧度：弧度是角的度量單位。code
（紅色部分爲弧長，角A爲弧長對應的圓心角）
弧長等於半徑的弧，其所對的圓心角爲1弧度。(即兩條射線從圓心向圓周射出，造成一個夾角和夾角正對的一段弧。當這段弧長正好等於圓的半徑時，兩條射線的夾角的弧度爲1)。
根據定義，一週的弧度數爲2πr/r=2π，360°角=2π弧度，所以，1弧度約爲57.3°，即57°17'44.806''，1°爲π/180弧度，近似值爲0.01745弧度，周角爲2π弧度，平角（即180°角）爲π弧度，直角爲π/2弧度。
弧長=n2πr/360 （在這裏n就是角度數，即圓心角n所對應的弧長。）
========================================================
2.二、正弦值：弦值是在直角三角形中,對邊的長比上斜邊的長的值。
Math.sin(x) : X 必需。一個以弧度表示的角。將角度乘以 0.017453293 （2PI/360）便可轉換爲弧度。
================================================
2.三、餘弦值:是指直角三角形銳角鄰邊與斜邊的比值。
Math.sin(x) : X 必需。一個以弧度表示的角。將角度乘以 0.017453293 （2PI/360）便可轉換爲弧度。
3、需求分析：
3.1 讓這些黃色的DIV ，在同一個圓的圓周上排列
3.2 排列的方式是平均分佈
4、原理分析：
要讓DIV的排列，造成一個圓形，實質就是設置每一個DIV的left值 和 TOP值 之間的關係，讓它們之間值的關係，按照圓形的規律去設值;
4.1 圓形的規律是什麼？
是PI（圓周率）; 任何值乘以這個PI再乘2，就能夠獲得一個圓形。這個「任何值」就是獲得的圓形的半徑;值越大，固然這個圓形也就越大。
4.2 怎麼找到每一個DIV的Left 和 TOP值之關係？
上圖中的每一個黃色DIV左上角的紅色點的座標，就是left 和 TOP值 ，要讓這個紅色的點，正好分佈在這個圓周上面，那麼Left 和 top 必然要和這個PI關聯起來。有PI纔有圓。
5、實例分析
我要獲得上圖中，紅點的座標值，即DIV的left 和 TOP值，
LEFT = NG + o的橫座標值（left）
TOP = ON + or的縱座標值（TOP）
因此先要求出每一個一以圓心o爲頂點，以圓形半徑爲斜邊，的直角三角形的兩個直角邊的值。（上圖中藍色直角三角形的ON線段和NG線段的長度值）
以半邊圓形來看，當圓心角變大，半徑不變的狀況下，這個底邊的值，是會變大的;
正弦公式：sin(X) = 對邊/斜邊 X變大，斜邊不變（半徑），那麼對邊（上圖中的NG線段）是會變大的;
餘統公式 cos(X) = 鄰邊/斜邊 X變大，斜邊不變（半徑），那麼鄰邊（上圖中ON線段） 是會變小的;
270度的正統值，是負1;
180的餘弦值是，是負1;
5.1 先設定一個圓
半徑：200px;
5.2 平均這個圓的圓周
假設咱們有8個DIV 要平均分佈在這個半徑爲200PX的圓周上面。那麼這裏咱們經過角度去平均（弧線的劃分也好，平均也好，冒似都應該經過角度去劃分）;
平均：圓形的圓心角的總角度爲360度，平均成8份，就是360/8; 這樣平分後的每個圓心角，所對的弧長，弧度，就都是相等的。
5.3 求出NG的長度值，也就是DIV的left值，即紅點的橫座標值;
求這個值，要用到正弦函數;
公式 Math.sin（X） = 對邊/斜邊;
咱們須要知道X，須要知到斜邊;就能夠求出「對邊」值，即NG的長度值;
5.3.1 這裏的X是弧度，即角度數;上面定義中說過，弧度數是表示角度數的;
根據公式: 角度數乘以 PI/180,就是弧度數; 即 X = (360/8)* PI/180
這個求出的X就是把圓形平分以後，的弧度數;
5.3.2 斜邊，就是這個圓形的半徑，即 200;
5.3.3 「對邊」值，即NG的長度值;
根據上面的公式變形：對邊（NG ） = Math.sin（X）*斜邊
即 ：對邊（NG ）= Math.sin（X）* 200 = Math.sin（ (360/8)* PI/180 ）* 200;
好了，如今把對邊（NG ）的值求出來了;也就是紅點的橫座標值，即DVI的LEFT值;
5.4 求出每個圓心角對應的直角邊，即對邊的長度值
由於每個圓心角，都是均分的，因此乘以一個倍數，就獲得不周圓心角對應的弧度值，即角度值
這裏用DIV的索引爲倍數，值乘以X，就獲得每一個均分後，每一個圓心角的弧度值;
對邊 = Math.sin（X*索引）* 200;
用這個求出的【對邊】值 作爲DIV的left值;
5.5 DIV的TOP值，即ON線段的長度值
以上面四點的原理同樣，只不過把正弦值，改成餘弦值
鄰邊（ON） = Math.COS（X*索引）* 200;
把這個值設爲 DIV的TOP值;
根據以上分析：代碼以下，就能夠按一個圓形，來排列DIV
//半徑
var radius = 200;
//每個BOX對應的角度;
var avd = 360/$(".box").length;
//每個BOX對應的弧度;
var ahd = avd*Math.PI/180;
$(".box").each(function(index, element){
$(this).css({"left":Math.sin((ahd*index))*radius,"top":Math.cos((ahd*index))*radius});
});
5.6 設置這個圓形的位置
圓形的位置，是根據這個圓形的圓心座標來定的，因此咱們就是要設置，圓心的座標值，left top
圓心的座標坐變化了，那麼對應DIV的left top也應該改變;
好比圓心的left :100PX ; TOP：100px;
那麼每一個DIV的LEFT和TOP也應該加上這個值：
代碼以下
$(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;
//設置圓的中心點的位置
$(".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});
});
})
六 總結：
6.1 在涉及到曲線或弧線的時候，應該用角度或弧度去分析，找關聯;
6.2 找關係或比例，讓值和值之間是一個關係式，會用到乘以或除以一個倍數;( 例如之前寫過的放大鏡，就是用比例關係);
七 先前的理解有誤，如今更新了分析的圖片和分析;感謝 「 弦」！的提示~