Jquery Isotope : How to fill empty gaps?

Question

I've tried basically every single hint / tip / advice to achieve that, but still, I got these empty ugly spaces while using Isotope.

Here's a demo showing the problem I'm experiencing.

You see these blanks? Is there any jquery code to make the bottom items kinda fill this blanks whenever there is any?

IF we use a single width for all items, the problem doesn't show at all. It starts to appear when using different widths for each item. Isotope is not intelligent enough to look for empty gaps and fill them if any appropriate size item is available.

Any help? I'm really stuck!

Complementary question that may help solve this problem :

Is there any jQuery plugin that forces elements float? I believe it could force fitting items to fill empty spots!

Herdic

I think you will need to write some javascript and fix them manually. – Elwoodelwyn

I'm not a codding guy :~) I only use what's there :~D so, writing anything from scratch is not an option for me! – Herdic

Answer 1

Per the latest edit, there is now a packery layout mode for isotope. The original answer and later additions remain below.

---

This feature has been requested by others as well:

• https://github.com/desandro/masonry/issues/141
• https://github.com/desandro/isotope/issues/125
• https://github.com/desandro/isotope/issues/197
• https://github.com/desandro/isotope/issues/198
• https://github.com/desandro/isotope/issues/219
• https://github.com/desandro/vanilla-masonry/issues/6
• How to avoid gaps using Isotope with Masonry layout

In short, the current answer seems to be that if you want to avoid gaps altogether you should:

1. Choose a fixed width
2. Carefully arrange your elements with respect to their sizes so no gaps are possible at your chosen widths.

Of course, if your items are not static in size and location, or if you can't set a width, I can't imagine that would work too well.

If manually arranging elements to fill gaps for a fixed width container will not work for you, I'd recommend chiming in with a +1 on the first link.

---

E (4.22.2013): I noticed some recent activity, so a quick update. This is all available in masonry issue #141, the first link:

PerfectMasonry is a layout extension for Isotope. It fills gaps by providing a "perfectMasonry" layoutMode and options which provides a gap-free layout.

Nested is an alternative library for gap-free layouts.

Packery is a library by the creator of Isotope which supports gap-free layouts and more.

I haven't personally used any of these (yet).

Last of all, on his blog post about Packery's release, DeSandro states "Eventually, I’d like to port over this and other solutions developed in Packery to Masonry and Isotope."

I would not count on that happening incredibly soon. Packery has only been released for 7 days as of this edit.

E2 (6.13.2014):

DeSandro has released a packery layout mode for isotope.

Placer

Thanks for the answer. Though, it doesn't resolve the issue. I already checked the above links from the plugin's Github's page, and no luck so far. I hoped if somebody found a hand made solution :~) since the plugin's creator won't do anything unless it's widely requested. – Herdic

I'm aware it doesn't solve the issue, but it does present the only option currently available without implementing a new layout mode or waiting for desandro (or someone else) to implement one. – Placer

There have been a lot of developments since Aug 2012, so I've updated with some of the recent information from masonry issue #141. If you've continued to use Isotope, you'll likely be most interested in PerfectMasonry since it provides an in-place solution via a change in options. – Placer

PerfectMasonry did it for me. – Herdic

I tried PerfectMasonry and Packery. They both worked well, but for absolutely zero gaps Packery was the way to go. – Virulence

Answer 2

I tried to explain why this is in this duplicate thread which includes a fiddle to play with also. It is not necessarily the fixed width, if you have many small items like in the original demonstration, the likelyhood of a snug fit is high, but not guaranteed. You can use an alternative plugin such as jQuery Tiles or try to adapt Wookmarks.

It's not trivial to implement in your case, see what's involved and search some images pertaining to it, you'll see the complexity involved.

Cosme

I shouldn't be that complicated :~) I mean, in the demo I posted, items have a logical growing size. They have a base size that could be multiplied, making it fit several columns or / and rows. In my imagination, we need some plugin that simply force floating elements to fill empty spots. Looks and sounds simple :~D but I don't know why nobody couldn't achieve that! – Herdic

I've tried Wookmarks. It doesn't support varying widths. This plugin's creator says that it supports only one width set which fits his needs... So, he won't extend it to support multiple width items. – Herdic

jQuery Tiles looks old and haven't been updated for a long time... I couldn't find any consistent demo... So, I dropped it. But thanks for the hints :~) – Herdic

See metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin why even that is not as straightforward as it sounds. But, in any case, bin-packing algorithms are neither black magic nor rocket science, but it takes quite some level of coding to implement them here, as far as I understand your intended functionality. You could start searching for Java implementations, or Processing, or find some MATLAB code and see if you can adapt it. Then, you can release some nice plugin, WP templates - and rack up kudos :) – Cosme