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 }); }); });
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
Post a Comment