divs kreisförmig anordnen?

...komplette Frage anzeigen

3 Antworten

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.

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...

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

Was möchtest Du wissen?