html 页面循环,javascript – HTML元素的循环布局

简单的纯JavaScript示例如何将HTML放入循环布局：

// retrieve the elements however you want (class name, tag name, ..)

var elems = document.getElementsByTagName('div');

var increase = Math.PI * 2 / elems.length;

var x = 0, y = 0, angle = 0;

for (var i = 0; i < elems.length; i++) {

elem = elems[i];

// modify to change the radius and position of a circle

x = 100 * Math.cos(angle) + 200;

y = 100 * Math.sin(angle) + 200;

elem.style.position = 'absolute';

elem.style.left = x + 'px';

elem.style.top = y + 'px';

angle += increase;

}

HERE是工作代码.