css - How to prevent overlapping of images that are positioned randomly using jquery -


i have gallery, positioned randomly in .container on each page load.

my problem images overlapping when load page sometimes. images not inside .container

the js pretty simple:

$(document).ready(function() {     $('.picture').each(function(i) {         $pt=$(this).height();         $pl=$(this).width();         $(this).css({             top:math.floor(math.random()*$pt)*i*2,             left:math.floor(math.random()*$pl)*i*2         });     }); }); 

http://jsfiddle.net/ahref/

i've looked web jquery solution prevent overlapping images, couldn't find 1 fits specificities. if take @ problem , share bit of science, i'd grateful. thanks!

this question asked before here: overlapping elements - html, css, , jquery

i've adapted code case in fiddle: http://jsfiddle.net/ahref/1/

define containerw , containerh (width , height of gallery) avoid getting pictures outside of want them be.

we have save each pictures dimensions , coordinates in positions , when trying random coordinates (top left values), compare existing ones see if it's overlapping or not.


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -