将多层图像排列成圆圈？可能吗？

Question

我正在寻找关于如何实现已经描绘的效果的一些指导。所以我正在学习JS和jQuery，我想建立一个基本上由圆圈组成的圆圈。这可能吗？任何信息都会有所帮助。我知道你可以围绕一个圆圈安排div / images，但是多层呢？ [圆圈内的圈子，基本上是？}

Answer 1

我写了这篇文章之前，你注意到你想要在中心的圈子，而不仅仅是在周边，但不管怎么说，无论如何：

JSBin demo

<强>的Javascript

var app = {
  count : 15,
  el : {
    self : document.getElementById('wrap'),
    width : document.getElementById('wrap').clientWidth,
    height: document.getElementById('wrap').clientHeight 
  },
  circle : {
    radius : ( document.getElementById('wrap').clientWidth / 2 ) - 50,
    centerX : ( document.getElementById('wrap').clientWidth / 2 ),
    centerY : ( document.getElementById('wrap').clientHeight / 2 ),
  },
  methods : {
    circle : function(radius, steps, centerX, centerY) {
      var xValues = [centerX];
      var yValues = [centerY];
      for (var i = 0; i < steps; i++) {
          xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
          yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
      }

      return [xValues, yValues];
    }
  }
}


var coords = app.methods.circle(app.circle.radius, app.count, app.circle.centerX, app.circle.centerY);

for ( var i=0; i<app.count; i++ ) {
  var x = coords[0][i],
      y = coords[1][i];

  var rand = Math.floor((Math.random() * app.count) + 1);

  var div = document.createElement('div')
      div.style.left = (x-25) + 'px'
      div.style.top = (y-25) + 'px'
      div.style.backgroundImage = 'url("http://api.randomuser.me/portraits/med/men/'+rand+'.jpg")'

  app.el.self.appendChild(div)
}

Answer 2

我猜你的问题不是微不足道的。不是关于JS / JQuery，而是关于数学！

关于圆形包装的整个数学研究。请检查一下： http://en.wikipedia.org/wiki/Circle_packing

您无法轻松找到可以找到现成算法的地方。但我会从六边形打包算法（http://en.wikipedia.org/wiki/Packing_problems）开始，然后在其中刻上圆圈。