16

this might be tough to explain. Is there a similar plugin like jQuery masonry that is able to detect spaces in a predefined grid and move and position elements that would fit into this spaces?

Since all other ways of explaining my question would be way to complicated I've drawn a simple image to show what I mean.

Notice: It's a fluid responsive webdesign.

enter image description here

So my dom-order is 1,2,3. However when collapsing my layout within a certain media-query I want to dynamically switch the dom order or position the elements differently. Just like you see in my sample.

I know there is stuff like jQuery Masonry or jQuery Isotope but both of those plugins don't fill all empty spaces of the grid. E.g. check out this isotope screenshot …

enter image description here

There is one element missing. Of course in most cases this is what you want to keep the order of the elements. In my case I don't care about the order, I just want to have all spaces and gaps filled. So exactly like you see my sketch above, the item-nr-3 should be moved upwards to fit the empty gap (since it would fit in). And if there would be another item the same size it would fit in the gap underneath item-nr-3.

Is that somehow possible? Is there some jQuery Plugin that does that? Or do you have any other idaes?

Some additional information: The items and boxes I'm talking about are all set to box-sizing:border-box so I do not have to worry about paddings or margins.

Update: Here is a live sample of the problem: http://jsfiddle.net/r79u2/1/

matt
  • 37,699
  • 99
  • 250
  • 390
  • do you have any jsfiddle ? – Royi Namir Jan 07 '13 at 07:28
  • @RoyiNamir Check this out … http://jsfiddle.net/r79u2/1/ This is exactly what I'm working with. Inside the `min-width: 45em` media-query I want my items 3, 4 to jump up to fill the grid. – matt Jan 07 '13 at 09:58
  • **+1** Excellent Question! – arttronics Jan 07 '13 at 12:54
  • 1
    Have you tried using css3 columns? There is a nice post about it over on [CSS-Tricks](http://css-tricks.com/seamless-responsive-photo-grid/). – Mottie Jan 13 '13 at 14:01
  • @Mottie Thank you for the tipp. Sounds good, but is this possible with the fiddle I posted? The problem is I need a working solution with the "framework" I already use. – matt Jan 15 '13 at 13:19
  • @Mottie Moreover, is this possible with different widths of the container like I have it in my fiddle? – matt Jan 15 '13 at 13:24

1 Answers1

14

EDIT

Since the time of posting this I have added support of "Gutters" and callbacks

I wrote a plugin that does what you're looking for. Not EXACTLY but you could use it to point you in the right direction...

Plugin - https://github.com/DrewDahlman/Mason

Blog Post about Theory - http://www.drewdahlman.com/meusLabs/?p=218

The Idea is this - we know that we have a number of elements - Mason's job is to fill a defined space with these elements which are floated left - this results in "gaps" so we need to detect those gaps and somehow fill them with something. In order to do this we can either copy an already existing element or - we can have a bucket of "filler" elements that we can fill that space.

OP - if you're looking for a randomly sized grid with some control this will do the work. I have made this fiddle - http://jsfiddle.net/bdGVr/

You'll notice each time you run it or resize the window the grid re-draws. This will result in any gaps being filled in with a red block.

Playing with the options of the mason.js you can adjust the ratio which is the size relative to the container, as well as the possible size combos.

example - a ratio of 1.8 and a size of 1x3 means 1.8 x 1 = Height, and 1.8 x 3 = Width.

Community
  • 1
  • 1
Drew Dahlman
  • 4,857
  • 1
  • 19
  • 33
  • 1
    Thanks for sharing your **Mason API** with Stackoverflow Drew Dahlman! I looked at your links and your `Mason.js` GitHub webpage... it's fresh off the presses I see, congrats! IMHO, this is close to what the OP will find. Having said that, I've removed my Answer and upvoted +1 yours. Message to matt: Not being an expert and not trying are two different things. You'll have to at least try in order to show where you need help at, as it's noted your comment posted at the same time as this answer. Well guys, I'm out! Cheers! – arttronics Jan 08 '13 at 07:32
  • 1
    Cheers @arttronics! :) It's pretty close to what OP is looking for but it uses randomly sized elements to create the grid based on a defined ratio to the screen. that said I'm updating my answer for OP... – Drew Dahlman Jan 08 '13 at 13:13
  • @DrewDahlman Thank you, I tried but couldn't really figure out how to implemnt this in my exisitng fiddle. See this - http://jsfiddle.net/r79u2/3/ . What is `promoted` standing for? Could you please help me out here. Thank you in advance. – matt Jan 09 '13 at 08:56
  • Hi @matt, okay so i updated your fiddle... http://jsfiddle.net/r79u2/4/ Now a couple things.. like I said this isn't EXACTLY what you're looking for but we could change it to be. ( joys of making the plugin ;) ) the promoted piece allows you to specify sizes based on a class - so your single, double, and quad can be forced into those sizes vs randomly. It will always fill gaps with the smallest size - so a single. check it out - we just need to allow for margins... – Drew Dahlman Jan 09 '13 at 16:35
  • Thank you. 1st.: How do we allow for margins? 2nd.: Is is possible not to "always" fill the entire page. I just want the elements that are exisiting to be moved and forced into the grid. Just like you see here http://cl.ly/image/311a3h2q1l26 (http://jsfiddle.net/r79u2/1/) I want number 3 and 4 to be forced into the free space (with margins) Thank you a lot for your great support. – matt Jan 10 '13 at 12:54
  • Hi @matt okay so! I updated the plugin and added support of Gutters which will now allow you to add the margins! you can see a working example here - http://www.drewdahlman.com/experiments/Mason/example/fluid_gutters.html check out the github page for the details. Cheers! – Drew Dahlman Jan 11 '13 at 17:23
  • @DrewDahlman thank you for supporting the gutters. I still had no luck implementing your plugin to my fiddle without breaking my layout … http://jsfiddle.net/r79u2/5/ Is it possible to define the gutter with `em`s like I have on my `.wrapper` class. I'd love to know if it's possible to use only the items available as placeholder and not fill it with an unlimited number of placeholders. – matt Jan 13 '13 at 18:08
  • Hey @matt http://jsfiddle.net/r79u2/6/ I made a tweak to the plugin - looked like it was getting messed up from the margins being added 2 times. Also no ems... As for the filler content - this is where things get tricky. Mason knows where the space is - but it's job is to make a perfect grid, not move things around - that would result in a jagged edge somewhere or open a new gap - the solution is to create something to fill spaces. – Drew Dahlman Jan 13 '13 at 18:27