Solved

jquery to position elements randomly, but without overlap

Posted on 2009-05-05
2
2,896 Views
Last Modified: 2012-06-21
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

0
Comment
Question by:steam23
2 Comments
 
LVL 12

Accepted Solution

by:
alien109 earned 500 total points
ID: 24307439
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
 

Author Closing Comment

by:steam23
ID: 31578017
Sorry I hadn't accepted sooner... been wrapping my brain around it...

Thanks
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now