random position of images

i found a script that would position divs / images randomly. However, it isn't completely working the way i want/need it to.

The images are loaded each within a div (which isn't ideal i guess). I have around 30 images.

But they don't load nicely and var posy = (Math.random() * ($(document).height() - 0)).toFixed(); doesn't work nicely either. The images mostly load on top (i think that the images in the blog don't count so it gets the height without images?)

So what I want: Load the in more nicely Randomize them so they get to the bottom of the page, too

Here is the site: http://ift.tt/1Hrzode

var circlePosition = document.getElementsByClassName('circle');
console.log(circlePosition);

function position() {
  for (var i = 0; i < circlePosition.length; i++ ) {
    //give circle a random position
    var posx = (Math.random() * ($(document).width() - 0)).toFixed();
    var posy = (Math.random() * ($(document).height() - 0)).toFixed();



    //apply position to circle
    $(circlePosition[i]).css({
      'position':'absolute',
      'left':posx+'px',
      'top':posy+'px',
    })
  } 
} //end function position

var circleTotal = circlePosition.length;

$('.circle').click(function() {
  $(this).fadeOut();
  circleTotal = circleTotal - 1;
  console.log(circleTotal);

  if(circleTotal == 0) {
    position()
    $('.circle').fadeIn();
  }

});

position();

<script src="http://ift.tt/1oMJErh"></script>
<div class="circle">
  <img src="http://ift.tt/1Hrzodh">
</div>
<div class="circle">
  <img src="http://ift.tt/1Hrzodh">
</div>