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!

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.

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.