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

【问题标题】：Arranging multiple layers of images into circles? Is it possible?将多层图像排列成圆圈？可能吗？
【发布时间】：2015-01-24 01:55:05
【问题描述】：

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

【问题讨论】：

这对于初始实现来说听起来并不难。您可以创建 n # 个“圆形”div，将它们的位置设置为绝对，并通过 JS 或 JQ 移动它们（调整 css 上/左）。最棘手的部分可能是弄清楚如何避免单个圆圈重叠（除非你想要那样），即。如果您根据某个半径随机放置它们。
Firefox 的“MeasureIt”插件可以在您定位单个图像时为您节省大量的剪切和尝试。此外，您可以将项目 absolute 定位在相对或绝对定位的 <div> 内，这将允许您在页面上移动整个圆圈。

标签： javascript jquery html css alignment

【解决方案1】：

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

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

您不会轻易找到可以为此找到现成算法的地方。但我会从六边形包装算法 (http://en.wikipedia.org/wiki/Packing_problems) 开始，然后在其中画圈。

【讨论】：

谢谢！这绝对是我一直在寻找的东西:)

【解决方案2】：

我在注意到你也想要在中心的圆圈之前写了这个，而不仅仅是在周边，但无论如何它都在这里：

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)
}

【讨论】：