Fill Empty Gaps with Dummy Element

[maimairel]

Hello, thanks for the great plugin. I've bought both developer licences for Isotope and Packery due to unbeatable quality :)

Just have a quick question, is there anyway to create dummy sized element for filling empty gaps in packery? I'm using it for a set of random sized images where sometimes a gap appears between them. I'd like to put some sort of pattern in those empty gaps to make it look pretty.

Thank you!

[maimairel]

This is what I'm trying to achieve: http://mamo.fr/
This is not using packery, but you'll see gaps are filled with patterns :)

[desandro]

Yes, there is a way to do this and it's with pckry.packery.spaces The spaces are an array of all the empty spaces. A space is an object with width, height, x, and y. See http://codepen.io/desandro/pen/shleG for an example

You can build upon example and try drawing in your own empty spaces.

[maimairel]

Thank you! I'll try that.
One more question, why is packery and isotope v2 no longer using translate3d but left,top for positioning? Is it the same performance wise?

Thank you!

[desandro]

why is packery and isotope v2 no longer using translate3d but left,top for positioning?

Good question! I found there was numerous issues with relying on translate3d transforms for positioning

• Crashing on iOS
• Broken interoperability with other UI components that need top/left positioning, like tooltip
• Font rendering

Outlayer libraries (Masonry v3, Packery, & Isotope v2) still use 3d transforms, but only for transitions. When transition has finished, then layout is set with top / left. It's a bit of a compromise. But so far, I haven't had any issues reported that relate to translate3d

I'm closing this issue as resolved 🐝

[superbrightfuture]

An issue with the solution here is that the canvas has a max height of 6000px or so depending on the browser, meaning it doesn't mesh all that well with infinite scrolling. What would be the best work-around? To create new canvases on the fly?

[vermario]

Hi! The problem with that spaces approach is that quite often the spaces overlap: in the codepen example you can see that clearly when you get darker spaces there. In our case for now we went with calculating the total area of the container, calculating the total area of all the elements that are there, subtracting the two getting the empty space area, and adding as many small items as are needed to fill the empty area with another ajax call. This seems to work quite well, but sometimes if the gaps are in the first positions of the grid the added elements end on the bottom, and the gap is still there.