Skip to content

Instantly share code, notes, and snippets.

@oscarkuo

oscarkuo/circularlayout.html

Created December 30, 2015 07:26
Show Gist options
  • Save oscarkuo/b5acd4d9abbdc6fb9458 to your computer and use it in GitHub Desktop.
Save oscarkuo/b5acd4d9abbdc6fb9458 to your computer and use it in GitHub Desktop.
Download ZIP
Circular layout HTML elements
Raw
circularlayout.html
<html>
<head>
<style>
.container {
width:400px;
height:400px;
float:left;
position:relative;
background:#ccc;
overflow:hidden;
font-weight:bold;
text-align:center;
}
.clock {
color: red;
}
.clock div {
height: 20px;
width: 20px ;
text-align: center;
vertical-align: middle;
position: absolute;;
}
</style>
</head>
<body>
<div class="container">
<div class="clock">
<div>12</div>
<div>o</div>
<div>01</div>
<div>o</div>
<div>02</div>
<div>o</div>
<div>03</div>
<div>o</div>
<div>04</div>
<div>o</div>
<div>05</div>
<div>o</div>
<div>06</div>
<div>o</div>
<div>07</div>
<div>o</div>
<div>08</div>
<div>o</div>
<div>09</div>
<div>o</div>
<div>10</div>
<div>o</div>
<div>11</div>
<div>o</div>
</div>
</div>
<script type="text/javascript">
var elems = document.querySelectorAll('div.clock div');
var increase = Math.PI * 2 / elems.length;
var x = 0, y = 0, angle = 0, elem;
for (var i = 0; i < elems.length; i++) {
var radius = 120;
if (i % 2)
radius = 115
elem = elems[i];
x = radius * Math.cos(angle) + 200;
y = radius * Math.sin(angle) + 200;
elem.style.left = (x) + 'px';
elem.style.top = (y) + 'px';
angle += increase;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment