Vertical space

[AnonSphere]

Hi there,

is there any simple way, to use the whole vertical space? If you look at the demo http://masonry.desandro.com/index.html (After: Masonry) div #7 does not expand to the possible height. How can I fix this?

regards Oliver

[desandro]

A valid question. But is there a simple way? No sir.

Here's the logic you would need to add to Masonry's layout logic:

1. Does this brick span more than 1 columns?
2. If so, keep track of the gap between the top of this brick and the columns it just filled.
3. Store this gap with others in an array
4. If the brick spans only 1 column, run though the gap array, measure whether or not this brick can fit into any gaps.
5. If it fits in a gap, re-measure the space of the gap.

I once got in touch with someone who had modified Masonry v1 with this sort of logic. So it can be done. But for now, I see this as an edge case. Even with this logic in place, there can still be gaps.

But others have requested this sort of thing. If you'd like to see it added as a mod of Masonry, do speak up with +1.

[AnonSphere]

+1 The logic is quite clear, my question was, if someone already has a solution for this :-)

[mattsaddo]

I would be interested in seeing this feature aswell +1. I like the idea of having the ability to have artwork filling the gaps.

[stuross]

I have a similar issue in that i needed to fill a previous gap that a block yet to be placed could have filled, but wasn't in the right order for masonry to place it there. I wrote some logic that kept track of the gaps and their heights and when masonry was deciding where to place the block I made it check to see if that block could fill a gap. The code will only fill gaps that are a single column wide, so if you have 4 or more columns and a block can be 3 or more columns wide then you could have gaps that are more than 1 column wide and the code won't fill the gap.

if anyone care to look at it: https://gist.github.com/1649731

[zanematthew]

+1

[richardsondx]

+1

[maninthemiddle]

From what I can tell the library tries to fit new pieces at the bottom rather than starting at the top and filling in any gaps as it goes through. Horrid, horrid gaps keeping me awake at night. We've written a library that performs the masonry correctly but it falls way behind Isotope on the other features. We wrote that first then switched to Isotope, don't want to have to switch back...

[kaanra]

+1

[4t4r1]

+1, and prepared to help; I think the primary case here is when all blocks BUT 1 (or very few) are the same size, with the odd-1-out usually being in focus, or larger, etc. Visually it is a big deal wen all the blocks are the same size - it creates a perfect gap where something else should obviously fit.

Perhaps it is better off as a new layout? mosaic ?.)

1. reserve space for large elements based on their theoretical positions
2. lay out default/equal elements in void areas Or, alternatively, some spin on a similar mathematical approach: lay out the largest elements first, etc.

But agree, adding this feature globally will add a lot of unnecessary overhead to the process & could produce very random arrangements.

[DahmaniAdame]

+1

[desandro]

There's an experimental fork by @sakabako that addresses this issue https://github.com/sakabako/masonry Please give it a try. I don't believe its use has been properly documented just yet, but getting some users to test it out could help its development

---

As indicated in #206, I feel that eliminating wasted space is outside the scope of Masonry. However, I am enthusiastic for other solutions that attempt to provide this solution.

[DahmaniAdame]

Just tried it. Gaps are still there!

[stutrek]

Although it can reduce the number of gaps, in order to completely remove them you must listen to the masonry.wastedspace event and fill the wasted space yourself.

I don't have time to write good documentation right now, but you listen like this:

$masonryContainer.on( "masonry.wastedspace", function(event, arrayOfWastedAreas) {} )

Then you need to create elements and add them to the dom. The only live example I have is not a simple one.

[Wysheer]

Hey Sakabako! nice work here! but i cant get it to work.. im i doing something wrong??

you can see it here: http://jsfiddle.net/kzgyD/113/

thanks!

[systembolaget]

Asked some math colleagues at University. They say such bin-packing issues could be "easily" dealt with with genetic algorithms or, failing that, like http://codeincomplete.com/posts/2011/5/7/bin_packing/ But "easily" maybe means something else to those guys...

[stutrek]

This is incredible! Thank you. I will definitely look into this but no guarantees.

[rickyferris]

Hello Guys, can you please review http://premier-research.headspacedesign.ca/ and see what I can do, there are alot of empty spots when I would hope there would not be...

[Dinuz]

+1 I am working on it right now (using some AI Technique)...Just I'd like to know what are the progress made on this at this point... @desandro and @sakabako could you update me on the subject? I really appreciate if you could let me know if you are still working on it and where (at which point) the development is now.

Thanks

[desandro]

@Dinuz et al.: I have done some preliminary work on a separate layout script that specifically aims to fill gaps. It's sort of like Masonry, but the layout algorithm is based on bin-packing. There is no ETA for this project, but it will a public release ... some day.

[Dinuz]

This is kind of cool...I was thinking to implement a genetic algorithm (some sort of neural network ), in order to solve the packing problem! The bin packing is a good technique but require kind of strong restrains and moreover can be super slow when the number of boxes increase!

In my idea I would like to modify the isotope code, to allow more options when setting up the isotope call(in this way I want allow a rational choose of boxes width and boxes to fix in the Dom)!

Do you think will be possible have a look a your layout code? Just to have an idea of how you proceed in setting it up?

I would like to finish this snippet, and maybe you can introduce it as new feature in the whole isotope code!

Let me know what do you think

Dinuz

Sent from my iPhone

On Dec 23, 2012, at 1:08 PM, David DeSandro notifications@github.com wrote:

@Dinuz et al.: I have done some preliminary work on a separate layout script that specifically aims to fill gaps. It's sort of like Masonry, but the layout algorithm is based on bin-packing. There is no ETA for this project, but it will a public release ... some day.

— Reply to this email directly or view it on GitHub.

[stutrek]

I have not had time to work on this in a long time, I'll pick it up again when I have time and a simple idea to improve it.

The layout logic simply divides the available space into columns and places elements in the highest possible column. The best way I was able to find to fill all available space was with the wastedspace event in my fork.

I am excited to see what you come up with.

[ghost]

Hey guys, sorry if I'm missing something here, but isn't it already looking for elements to fill in gaps? In this case, wouldn't it work to make it look further recursively until the last element? This would be a great addition to websites that the ordering of the elements is not as important as keeping the tight layout. +1 and willing to help.

[stutrek]

I implemented something like that and it caused huge gaps at the bottom. The way it works now, without trying to fill in gaps it has gone past, distributes whitespace more evenly.

[ghost]

I think that might work well for me. Since I am using infinite scrolling, the huge gaps at the bottom would be filled dinamically as the user scrolls down. Would you mind sharing the code for that, if you still have it? Thanks for the help..

[stutrek]

It's not in masonry but in my mosiac project. You might need to dig through the history to find it.

Infinite scrolling is another reason to stick with the normal masonry algorithm. You don't want to put elements in places the user has already scrolled past. The best thing to do is usually to start a new container and fill it with new content, if you get too many elements scrolling will visibly stutter as the elements are laid out.

[ghost]

@sakabako I tried to use your version but it has not reduced any gaps. I am trying to use masonry a fixed width, 2 columns news grid, but still had no success, the ordering is too strict and I don't need that. If I have 3 boxes, where 1 and 3 are small and 2 is big, I want 13 on top of 2, but masonry puts 1 22 and then 3. Also tried Isotope without success. I am having nightmares with this.. Since you have more experience, can you give me any ideas on how I could start adressing this in the code?

[stutrek]

The easiest solution may be to get your elements in a good order before laying them out.

I just found my code that puts elements in wasted space and pushed it to sakabako/mosaic. It needs RequireJS and there is no documentation right now. You can open an issue (in sakabako/mosaic) for that, but right now it is low priority for me. If you need to use it, hopefully you can figure it out from test.html.

[mdeboer]

+1 on this one!

[bspitzack]

+1

[Mitchell-PHP]

use https://github.com/zonear/isotope-perfectmasonry which is a masonry plugin to make sure there is no gaps. I only just found it yesterday.

[desandro]

Recent solutions!

• Nested by suprb
• For those of you using Isotope, there's the perfectMasonry layout mode for Isotope by Zonear - thx @Mitchell-PHP for the tip!
• Coming soon is Packery. Once this is released, this issue will be officially closed YAY.

[systembolaget]

Great, an implementation of a bin-packing algorithm? Isotope is just getting much stronger, I wish Packery could replace my W8/WP8 tiles :)

From: David DeSandro notifications@github.com<mailto:notifications@github.com> Reply-To: desandro/masonry reply@reply.github.com<mailto:reply@reply.github.com> Date: Dienstag, 12. Februar 2013 16:05 To: desandro/masonry masonry@noreply.github.com<mailto:masonry@noreply.github.com> Cc: Andreas Hopf andreas.hopf@design.lth.se<mailto:andreas.hopf@design.lth.se> Subject: Re: [masonry] Vertical space (#141)

Recent solutions!

• Nested by suprbhttp://suprb.com/apps/nested/
• For those of you using Isotope, there's the perfectMasonry layout mode for Isotope by Zonearhttps://github.com/zonear/isotope-perfectmasonry - thx @Mitchell-PHPhttps://github.com/Mitchell-PHP for the tip!
• Coming soon is Packeryhttp://metafizzy.co/blog/packery-preview/. Once this is released, this issue will be officially closed YAY.

— Reply to this email directly or view it on GitHubhttps://github.com/desandro/masonry/issues/141#issuecomment-13436326.

[Olliepop]

+1 very interested in this. Thanks for the effort

[trewknowledge]

Can't wait for Packery!

[desandro]

Packery is out http://packery.metafizzy.co

Packery is a JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.”

We can now close this issue forever.

:fireworks: :cake: :gift_heart: :grey_exclamation: :sailboat: :beers: :cake: :gift_heart: :grey_exclamation: :sailboat: :beers: :fireworks: :gift_heart: :grey_exclamation: :sailboat: :beers: :fireworks: :cake: :grey_exclamation: :sailboat: :beers: :fireworks: :cake: :gift_heart: :sailboat: :beers: :fireworks: :cake: :gift_heart: :grey_exclamation: :beers: :fireworks: :cake: :gift_heart: :grey_exclamation: :sailboat:

[trewknowledge]

Amazing!! Congratulations!

[systembolaget]

Indeed. Take the back seat, Windows 8 :)

From: trewknowledge notifications@github.com<mailto:notifications@github.com> Reply-To: desandro/masonry reply@reply.github.com<mailto:reply@reply.github.com> Date: Montag, 15. April 2013 16:00 To: desandro/masonry masonry@noreply.github.com<mailto:masonry@noreply.github.com> Cc: Andreas Hopf andreas.hopf@design.lth.se<mailto:andreas.hopf@design.lth.se> Subject: Re: [masonry] Vertical space (#141)

Amazing!! Congratulations!

— Reply to this email directly or view it on GitHubhttps://github.com/desandro/masonry/issues/141#issuecomment-16386310.

[mdeboer]

Wow thanks so much! Gonna give it a try and implement it in my website (www.maartendeboer.net/portfolio) instead of Isotope/masonry! :+1:

[dustmoo]

Awesome work everyone! And thanks for Packery! I was wondering if any work had been done to make Packery work with Isotope. I know thats "coming soon" but I would like to help as I need the sorting and filtering ability of Isotope, but would love the bin-packing algorithm of Packery.

If any work has been done in this direction that I can build off of that would be great.

(Or it may just be better to use perfectMasonry for the time-being)

Thanks!

[desandro]

@dustmoo development on Isotope v2 is happening right now. Currently, my estimate is to release it in October 2013.

[dustmoo]

Awesome! Thanks for your amazing development. Both isotope and packery are wonderful libraries.

On Wed, Aug 7, 2013 at 10:51 AM, David DeSandro notifications@github.comwrote:

@dustmoo https://github.com/dustmoo development on Isotope v2 is happening right now. Currently, my estimate is to release it in October 2013.

— Reply to this email directly or view it on GitHubhttps://github.com/desandro/masonry/issues/141#issuecomment-22270001 .

[sethjenks]

+1

[guyisra]

does isotope v2 implement the better bin packing algorithm that packery does? From the demos on the websites it still leaves off holes

thanks

[desandro]

@guyisra No, Isotope still uses the same Masonry algorithm. I can add Packery as a layout mode to Isotope, but that's still just an idea.

[mdeboer]

Would be nice to merge them all and preferably make them modular like Modernizr. Afaik the layout logic should be separate from the data logic (filtering of elements and supplying them to layout logic) so it shouldn't be too hard to make it modular.

[bompi88]

+1