metafizzy / packery

:bento: Gapless, draggable grid layouts
https://packery.metafizzy.co
4.15k stars 315 forks source link

center-out layout algorithm #62

Open desandro opened 11 years ago

desandro commented 11 years ago

@metafizzyco would packery work placing items outwards from the centre rather than from the top left? have you tried it (or seen it tried)?

– @noii

I've been thinking about this and I think I can pull it off.

Currently the algorithm works by sorting the available spaces by the closest to the top left corner. Switching corners is easy enough.

In order to support a layout where there's is a fixed point, and stuff is laid-out around it would work by sorting spaces based on their distance from the 'center point'.

pyronaur commented 11 years ago

+1 wants this

Skaidon commented 11 years ago

+1

jide commented 11 years ago

Would be so useful for one of my projets !

alevals commented 11 years ago

This would be great! Any progress or idea on how to implement it ?

thecoleorton commented 10 years ago

+1

jbravar commented 10 years ago

+1

loginx commented 10 years ago

:+1:

thecoleorton commented 10 years ago

Any update on this? My attempts on doing something similar has created WAY too many edge cases...

Thanks in advance!

desandro commented 10 years ago

In the works.

Packery center out

Development is on the center-out-corner branch. It's in an experimental phase. While this is a neat visual demo, I'm unsure how practical its application is.

jbravar commented 10 years ago

For what it's worth, I came across this issue while developing a site where the designer wanted to have a layout with items expanding infinitely in every direction. Didn't end up implementing it that way, but I thought it was an interesting idea.

dhowe commented 9 years ago

Curious as to the status of this branch, and whether it will get integrated into Packery itself... ?

desandro commented 9 years ago

This branch is still an experiment and will likely continue to be so. It's a neat feature, but I don't think it has enough popularity to build into Packery.

dhowe commented 9 years ago

I see -- any reason why events would not work as usual on this branch? (see issue #235)

desandro commented 9 years ago

The center-out-corner branch is experimental. Things are likely to break. Sorry, but I won't be able to devote time to look in to broken events.

streiten commented 9 years ago

+1

pzelchenko commented 9 years ago

Very nice, Desandro. Just what we are looking for. How painful would it be to make this hierarchical? This would be far more space-efficient than regular circle packing. (See D3 Bostock/Heer example with circle packing, at http://bl.ocks.org/mbostock/4063530.) I'm worried that what you'd end up with is a lot of space unless you had some fill flex in the parent as well as (perhaps) the possibility of a nonrectangular polygon as the parent. That's the only way to make it very space efficient.

workmanw commented 7 years ago

@desandro This actually works really great. I'm adopting this "center-out" algorithm implementation for a commercial product I'm working on. While we're not using packery code directly at the moment, I'm still buying an 8 pack of developer licenses to support the project. Thank you!