圍繞一個半徑的圓安排不同的高度div

所以，我一直在嘗試創建大量的div（我們可以稱之爲酒吧），並讓它們旋轉和定位，以便它在中心創建一個圓。我不善於解釋，所以這裏有一個例子，所有的酒吧都有相同的寬度和高度。
JSFiddle Here:

在這裏一切看起來不錯。但是，當我更改條的高度時會出現問題。 JSFiddle Here:

我假設我的煩惱來自於我的定位和旋轉功能，或者是絕對定位的本質。這裏是我的第二個JSFiddle的例子。圍繞一個半徑的圓安排不同的高度div

var $bars = []; 
var viz = document.getElementById('viz'); 

function create(num) { 
    for(var i = 0; i < num; i++) { 
     var a = document.createElement('div'); 
     a.classList.add('bar'); 
     viz.appendChild(a); 
     $bars.push($(a)); 
    } 
} 

create(256); 

$(document).ready(function(){ 
    var step = Math.PI * 2/$bars.length; 
    var radius = 200; 
    var angle = 0; 

    for (var i = 0; i < $bars.length; i++) { 
     var x = Math.round(radius * Math.cos(angle)); 
     var y = Math.round(radius * Math.sin(angle)); 
     $bars[i].css('left', x + 'px'); 
     $bars[i].css('top', y + 'px'); 
     $bars[i].css('height', i + 1); 
     var rot = 90 + (1.4025 * i); 
     $bars[i].css('transform', 'rotate(' + rot + 'deg)'); 
     angle += step; 
    } 
});

即使高度與我的例子不同，是否有辦法保持所有div/bar的圓弧半徑？（我相對比較新，所以請原諒我可憐的代碼）

來源

2017-04-01 Chase