Position images randomly and avoid overlapping with wordpress plugins

I am trying to randomly position thumbnail images on an CPT archive-page on wordpress. The images should not overlap. Also, the z-index in not really working (the images should go behind all other elements. I cannot use pluggins.

The content is dynamically generated through a php document. I am trying to do 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://ift.tt/2dCivKL