divs kreisförmig anordnen?

Hi,

ich würde gerne einige divs kreisförmig anordnen und habe auch eine pfiffige Rechnung gefunden. Doch mir fehlt als Anfänger noch irgendwie das Abstraktionsvermögen, um die Formel auch tatsächlich für den Code anwenden zu können. Die Idee: // N Gesamtanzahl der Elemente, n Laufindex, R Radius x[n] =R * cos(n/N * 2 * Math.Pi()) + M.x; y[n] =R * sin(n/N * 2 * Math.Pi()) + M.y;

Setze ich an "x" und "y" einfach die tags / Klassen / IDs und wie binde ich die Formel vernünftig in eine js Function ein? var a = function b () { Formel }

?

Answer 1

[Dory1]

Probiers mal so:

.dynamic {
  width: 10px;
  height: 10px;
  background: red;
  position: absolute;
}

JS

function createCircleOfDivs(num, radius, offsetX, offsetY, className) {
   var x, y;
   for (var n = 0; n < num; n++) {
     x = radius * Math.cos(n / num * 2 * Math.PI);
     y = radius * Math.sin(n / num * 2 * Math.PI);
     var div = document.createElement("div");
     div.className = className;
     div.style.left = (x + offsetX) + "px";
     div.style.top = (y + offsetY) + "px";
     document.body.appendChild(div);
   }
}

Beispielaufruf:

createCircleOfDivs(30, 100, 100, 100, "dynamic");

Demo: http://codepen.io/anon/pen/vKpPBJ

Answer 2

[regex9]

Dafür ist kein Abstraktionsvermögen notwendig, denn die Abstraktion wird bereits durch deine Formel repräsentiert. Um dir deinen Algorithmus zu bauen, musst du dir bewusst machen, was du machen willst und diesen Vorgang dann in verschiedene Schritte aufspalten. Das letztendliche Umschreiben in JS benötigt nur Wissen über die Syntax der Sprache.

An deiner Stelle würde ich entweder div-Boxen bereits ins Markup schreiben und dann mit JS in einlesen und in ein Array speichern oder die Boxen dynamisch im DOM erzeugen.

Answer 3

[Isendrak]

Ahoi, ich hätt da was im Lager, auf dessen Basis du arbeiten könntest: http://pastebin.com/4MT8Z95S

Das ganze funktioniert nicht nur mit divs, sondern mit allen "block" oder "inline-block" Elementen (Hab's allerdings nur mit divs getestet... ;^^ )

P.S.: Damit kannst du, wenn du Spass dran hast, die divs auch in ner Ellipse anordnen...