How to get isotope to avoid gaps with variable size tiles

Question

Is there a way to get isotope to order the grid in the way that there are no gaps?

I see the elements changing places in few of the demos but can't achieve the effect myself. Like here: http://isotope.metafizzy.co/demos/layout-modes.html

Here's my fiddle: http://jsfiddle.net/crappish/zvRy5/

As you can see, when you resize the "result", the grid changes alright but at certain widths, white gaps appear in the mosaic. Which is highly unfortunate. :(

as i played this the demos on http://isotope.metafizzy.co/demos/ - there's always can be a place for a gap on resizing - try adding new elements here and resize: http://isotope.metafizzy.co/custom-layout-modes/masonry-gutters.html — shershen, Jun 21 '12 at 11:04

crappish · Accepted Answer · 2012-11-13T12:17:28.723

12

I ended up writing my own extension (perfectMasonry) which does not leave gaps, but instead lays out perfect "brick wall". :) I'll try to publish it (GitHub, mayhaps) as soon as I get some free time to clean it up.

Edit: Here be the perfectMasonry extension: https://github.com/zonear/isotope-perfectmasonry

edited Nov 13 '12 at 12:17

answered Oct 24 '12 at 13:57

crappish

2,688
3
28
42

2

You sir, are a gentleman AND a scholar. – Jacksonkr Mar 26 '13 at 13:06
Heheh. Thank you! Hope it works for you :) – crappish Mar 26 '13 at 18:53
I'm getting a 'Uncaught TypeError: Property '_perfectMasonryReset' of object # – Probocop Jul 26 '13 at 14:30
This is awesome, it should be in the core imho. I hope this gets updated for isotope v2. I might lend a hand. – gkiely Jun 25 '14 at 06:17
1

Grant, help would be appreciated. I don't currently have any time to build support for V2 so if you want to help where I can. :) – crappish Jun 30 '14 at 14:53

score 1 · Answer 2 · answered Jul 11 '12 at 18:04

If you look at this fiddle and that screenshot - while observing the numbers in your divs - you see that the next masonry element up (the red element 5) can not possibly fit in the white square as it must come after element 4; so where it must end up means, that, with only three rows fitting, you'll get a white gap. Maybe you can use Isotope's shuffle and reLayout methods and sacrifice ordering your elements in a strict order?

How to get isotope to avoid gaps with variable size tiles

2 Answers2

Linked