圆形码头/菜单在css或jquery

Question

是否可以使用css或jquery进行循环菜单或停靠.
我有一组图像作为码头项目需要显示为圆形码头...但是码头中的项目数量不是常数,可能会有所不同....所以我不能倾向于使用常量值进行定位每个项目以预定义的方式.Ajax将一些图像加载到这个特定的div中,我需要使用css或jquery来设置它的样式,以便它们显示为圆形停靠项.关于如何实现这一点的任何想法..？
我想要一个浏览器特定的实现,但我也欢迎,如果有人有一些特定于少数浏览器的解决方案...

更新
我不认为我确实想要一个馅饼菜单...随着停靠项目数量的增加,它很容易搞砸.我正在寻找一个螺旋码头.通过螺旋我的意思是菜单项必须在以下对齐..

Answer 1

我想我明白了！这只是一个基本概念，所以请自行调整。

http://www.mathematische-basteleien.de/spiral.htm#Spirals%20by%20polar%20equations

请参阅以下JSFiddle和下面的代码：

var items = 10;
var a = 20;
var b = 1; // updated an extra b, used for rate (see update section below)
var centerX = $('.content').innerWidth()/2; // and some adjustment of half its own size
var centerY = $('.content').innerHeight()/2;
for(var i = 0; i < items; i++)
{
    var yPos = a * i * Math.cos(b*i) + centerY;
    var xPos = a * i * Math.sin(b*i) + centerX;
    var item = '<div class="item" style="top:' + yPos   + 'px; left:' + xPos + 'px;" />';
    $('.content').append(item);
}

还有一些用于测试目的的 CSS：

.item
{
    width:10px;
    height:10px;
    position: absolute;
    background-color:red;
}

.content
{
    position:relative;
    height:300px;
    width:300px;
    background-color:green;
}

<div class="content">
</div>

更新：回复评论

yPos 和 xPos 的函数正在向外部生成项目，它们从中心点开始。通过在 中定义一个 differenta和一个 extra 。可以更改 div 出现的速率和总螺旋的展开。螺旋的展开由 定义，因为它定义了振幅。div 出现的速率由新的.var bMath.cos(b*i)ab

因此，较小b意味着角度较小，意味着螺旋上的距离更近。较小a意味着振幅较低，意味着 x 和 y 轴上的距离更近。

如果图像的数量不可预测，也没关系，因为螺旋会向外延伸。当然，如果添加太多，这会给您带来问题。

另一个解决方案是在 PHP 中执行此操作，因为它没有任何动态操作，因此您已经可以在后端执行此操作。可能与 forloop 和 all 相同，但随后与 PHP 中的打印语句相同。