Skip to content

Instantly share code, notes, and snippets.

@nobitagit

nobitagit/gist:e7e390a4737aa69408df

Created July 15, 2014 13:01
Show Gist options
  • Save nobitagit/e7e390a4737aa69408df to your computer and use it in GitHub Desktop.
Save nobitagit/e7e390a4737aa69408df to your computer and use it in GitHub Desktop.
Download ZIP
Distribute images along a cricle
Raw
gistfile1.txt
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container{
width: 600px;
height: 600px;
position: relative;
border: 1px solid red;
}
#cerchio{
width: 100%;
height: 100%;
border: 2px solid orange;
position: absolute;
border-radius: 100%;
}
#cerchio img{
width: 30px;
height: 30px;
position: absolute;
-webkit-transition: all 1s;
}
</style>
<!--[if lt IE 9]>
<script src="js/libs/html5shiv.js"></script>
<!-- <script src="js/libs/respond.min.js"></script> -->
<![endif]-->
<title>Circletest</title>
</head>
<body>
<div class="container">
<div id="cerchio">
<img id="img1" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
<img id="img2" src="http://icongal.com/gallery/image/278651/person_customer_user_face_comment.png" alt="" draggable="true"/>
</div>
</div>
<!-- script type="text/javascript" src="js/scripts.js"></script -->
<script>
var circle = document.getElementById('cerchio'),
imgs = document.getElementsByTagName('img'),
total = 20,
coords = {},
diam, radius1, radius2, imgW;
// get circle diameter
diam = circle.getBoundingClientRect().width,
radius = diam/2,
imgW = imgs[0].getBoundingClientRect().width,
// get the dimensions of the inner circle we want the images to align to
radius2 = radius - imgW ;
var i,
alpha = Math.PI / 2,
len = imgs.length,
corner = 2 * Math.PI / total;
for ( i = 0 ; i < total; i++ ){
coords[i] = {
x : ( radius - imgW / 2 ) + ( radius2 * Math.cos( alpha ) ),
y : ( radius - imgW / 2 ) - ( radius2 * Math.sin( alpha) )
}
alpha = alpha - corner;
}
console.log(coords)
for ( i = 0; i < len ; i++ ){
imgs[i].style.left = coords[i].x + 'px';
imgs[i].style.top = coords[i].y + 'px';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment