-
Notifications
You must be signed in to change notification settings - Fork 282
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature: Gap-Free Layout #189
Labels
Comments
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. |
@Vestride alright, so you need to tell me whether you want me to prepare a PR or not. |
No pull request, but I will look into this in the future. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:/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:
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
The text was updated successfully, but these errors were encountered: