random position of images

Question

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

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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//placehold.it/1x5000"> <!-- Placeholder image to show issue -->
<div class="circle">
  <img src="http://static.tumblr.com/tensqk8/k8anq0438/01.png">
</div>
<div class="circle">
  <img src="http://static.tumblr.com/tensqk8/k8anq0438/01.png">
</div>

It actually worked OK for me: appeared to be fairly random and I didn't see images unevenly distributed near top of page. But I was going to post same comment as MCM: try `$(window).load(position);` because the load event fires after all images have loaded, and if images do not have height defined the doc height may change. You might be getting very fast response.. put a breakpoint in your current call to `position();` and check the value of `$(document).height()`. Mine was about 15,000 px or so. Also: don't do random images. It is poor UX unless you add collision detection for your content. — nothingisnecessary, Aug 05 '15 at 21:57
I've edited your snippet with a very tall image to show the issue. @MCM's answer is correct, it should be in an `window.onload` or `$(window).load()` event listener. Also, you should notice that this only happens the first time you load the page, after the images have loaded the result will be cached. — , Aug 05 '15 at 21:57

score 1 · Answer 1 · answered Aug 05 '15 at 21:49

1

try moving your position(); call inside the $(window).load function.

I think maybe the images are being positioned before all the images have loaded, so the page is shorter then.

answered Aug 05 '15 at 21:49

MCM

469
1
6
17

Could you phrase this as an answer instead of a guess? – Aug 05 '15 at 21:58

code_monk · Accepted Answer · 2015-08-05T22:54:44.437

A clean and readable and solution without a jQuery dependence might be something like this. It avoids unnecessarily wrapping your images in divs by positioning the images themselves. It includes a hidden element as a sort of "poor man's" shadow DOM.

http://jsfiddle.net/sean9999/yv9otwr7/9/

;(function(window,document,undefined){
    "use strict";
        var init = function(){    
            var canvas = document.querySelector('#x');
            var icon_template = document.querySelector('#template');
            var icon_width = 40;
            var icon_height = 30;
            var the_images = [
                'http://static.tumblr.com/tensqk8/k8anq0438/01.png',
                'http://static.tumblr.com/tensqk8/rYanq05el/04.png',
                'http://static.tumblr.com/tensqk8/SYknq05py/05.png',
                'http://static.tumblr.com/tensqk8/s7inq057d/03.png'
            ];
            var pickRandomImage = function(){
                var i = Math.floor( Math.random() * the_images.length );
                return the_images[i];
            };
            var total_number_of_images = 10;
            var max_height = canvas.offsetHeight - icon_height;
            var max_width = canvas.offsetWidth - icon_width;
            var randomCoordinate = function(){
                var r = [];
                var x = Math.floor( Math.random() * max_width );
                var y = Math.floor( Math.random() * max_height );
                r = [x,y];
                return r;
            };
            var createImage = function(){
                var node = icon_template.cloneNode(true);
                var xy = randomCoordinate();
                node.removeAttribute('id');
                node.removeAttribute('hidden');
                node.style.top = xy[1] + 'px';
                node.style.left = xy[0] + 'px';
                node.setAttribute('src',pickRandomImage());
                canvas.appendChild(node);
            };
            for (var i=0;i<total_number_of_images;i++){
                createImage();
            };
        };
       window.addEventListener('load',init);
})(window,document);

body {
    background-color: #fed;
}

#x {
    border: 3px solid gray;
    background-color: white;
    height: 400px;
    position: relative;
}

#x .icon {
    position: absolute;
    z-index: 2;
}

<h1>Randomly distributed images</h1>

<div id="x"></div>

<img src="#" class="icon" hidden="hidden" id="template" />

cool :) if you think it correctly answers your question than please mark it as such — code_monk, Aug 06 '15 at 11:57

random position of images

2 Answers2

Linked