Making a home page with scattered divs

[matt25]

Hi, I have been asked to make a website and part of the design brief is that the home page has boxes scattered over the page for their latest work or posts.
The problem I am having is that they want the boxes to be dynamic so they want the sizes of the boxes to change weather it be a portrait picture or a video with text or whatever.
For that I was going to just use absolute positioning and then make sure they could never overlap with any combinations of photo or video boxes.
Trouble is they would also like to be able to position the boxes themselves within a grid.
What would be the best way to go about this? I am guessing javascript but is there any pre scripts around that will save me making one (its not in the budget). Or any ideas how I can achieve this?

Any help is much appreciated
Thanks
Matt

[chrisburton]

Is this something you’re looking for? http://desandro.com/packery/draggable.html

[GMB]

That’s pretty darn tootin’!

[matt25]

Thanks for the replies. I am not sure that would work because they want to position them exactly, depending on the background image. Also I am building this on wordpress so I would have to make it work for that.
[This ](http://www.trick-tips.com/wp-content/uploads/2013/06/Home.jpg “This”)is my design brief, so all those scattared divs would need to never overlap, no matter what was in them, and preferably be moved about in a grid.

Thanks
Matt

[TheDoc]

> Trouble is they would also like to be able to position the boxes themselves within a grid.

That is major trouble and would involve an *incredible* amount of customization in WordPress.

There was a link to a grid layout that was completely random that I saw the other day but I can’t find the link to it anymore. I think Masonry (and Isotope/Packery) rely on strict grid structure, but it looks like your design is going for a ‘scattered’ approach (as you mention).

[Author]

Posts