Feature: Gap-Free Layout

[macjohnny]

We propose a new feature for creating gap-free layouts.
So instead of the current behavior (Codepen)

we should get the new behavior (Codepen)

The current behavior is due to the logic implemented here:
https://github.com/Vestride/Shuffle/blob/master/src/layout.js#L35
Items being processed after an item that e.g. spans across some columns and leaves a gap above it cannot fill this gap and are placed after the column-spanning item.

The proposed feature can be achieved by trying to place every block on the first grid point starting at the top left corner where it does not overlap any blocks already processed.

Here is a sketch of the algorithm we implemented:

• set fittedBlocks = []
• for each blocks as block
  • if is first block
    • add to fittedBlocks with x=0, y=0
  • else
    • for each fittedBlocks as fittedBlock
      • try placing block at top right corner, bottom left corner or beginning of the line of the fittedBlock
      • if it does not overlap any of the fittedBlock items, add it to fittedBlocks at the position checked

Here is our implementation
https://gist.github.com/macjohnny/929e70144417c105ecee851234646dbe

with an example:
https://codepen.io/macjohnny/pen/ZXNEvV

@Vestride If you are willing to include this feature in the Shuffle.js library, we would prepare a PR with our code. Also, you should decide whether this should replace the existing algorithm or be available as an option.

Shuffle version

latest

Reproduction Link

https://codepen.io/macjohnny/pen/rGgByG

[glen-cheney]

Thanks for the thorough issue! I'm hesitant to add this much more code for gap-free layout and because you can achieve gap-free layouts with Masonry and Packery. If I were to include this, it would not be the default option because it would break the sorting feature of Shuffle.

[macjohnny]

@Vestride alright, so you need to tell me whether you want me to prepare a PR or not.

[glen-cheney]

No pull request, but I will look into this in the future.