jquery to position elements randomly, but without overlap

I am placing a dynamic amount of elements in random positions in a parent element. Each element is 75px square and position:absolute and I'd like to make sure that their random x and y co-ordinates don't overlap those of any already positioned elements.

Points for urgency...
$('.className').each(function(){
$(this).css({ 'top':randomXToY(0,375),
	 'left': randomXToY(0,450),
	});
});
 
// in case it's useful, my random function is just:
 
function randomXToY(minVal,maxVal,floatVal){
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

Open in new window

steam23Asked:
Who is Participating?
 
alien109Connect With a Mentor Commented:
What you're asking for is actually a fairly complex algorithm. You might want to research "Rectangle Packing". There are numerous methods each has trade offs in speed and the tightness of the packing.

Layout algorithms are tough. Another method you might consider is a force directed layout or force based layout -> http://en.wikipedia.org/wiki/Force-based_algorithms

I was working on a force based layout for an experiment in flash (if you want to see what the end result might be)
http://blog.alien109.com/2009/02/17/force-directed-node-interface-2/

The force based method probably is going to provide a more structured layout however which may not work if you need a more scattered aesthetic.

0
 
steam23Author Commented:
Sorry I hadn't accepted sooner... been wrapping my brain around it...

Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.