Position images randomly and avoid overlapping (without wordpress plugins) - php

Question

I am trying to randomly position thumbnail images on wordpress. The images should not overlap. Also, the z-index in not really working (the images should go behind all other elements).
The content is dynamically generated through a php document.
I am trying to avoid plugins so I am doing it like this:
<?php if ( has_post_thumbnail() ) : ?><div class="js-container bottomdrag">
<script type="text/javascript">
$( document ).ready(function() {
$('.js-container a').each(function() {
var height = window.innerHeight/2;
var width = window.innerWidth/2;
//This var top should provide a scroll so that the user gradually finds the images
var top = Math.floor(Math.random() * (($(window).height() * 3) - height));
var left = Math.floor(Math.random() * 55);
$(this).css({
"z-index":"-999",
"top": top,
//this margin-bottom is there to allow some space after the last image so that the user can scroll it
"margin-bottom":"30" + "vh",
"left": left + "vw",
"position":"absolute",
"display":"block",
});
});
});
</script>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?></div> <!--end of js-container-->
Would you be able to light my way?
Here is the page: http://dev.visualvisual.com/works/

Answer 1

This does the job better but Z-index is still not working.
<?php if ( has_post_thumbnail() ) : ?><div class="js-container bottomdrag">
<script type="text/javascript">
function randomMargin(){
$('.attachment-post-thumbnail').each(function(){
randomizeObject(this);
});
}
function randomMargin(){
$('.attachment-post-thumbnail').each(function(){
randomizeObject(this);
});
}
function randomizeObject(el){
var randomnumber1=Math.floor(Math.random()*70);
console.log(randomnumber1);
var randomnumber2=Math.floor(Math.random()*50);
console.log(randomnumber2);
$(el).css({"margin-top": randomnumber1+"vh", "margin-left": randomnumber2+"vw", "z-index":"-999"});
}
randomMargin();
</script>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?></div> <!--end of js-container-->
</a>
<?php endif; ?>