Reduced wasted space, made wasted space useful, more sensical item ordering, events. #206
Conversation
… order instead struck top to bottom.
…ead of triggering multiple times.
|
Can I +1 this one? We really really would like to use this at Yammer, but we'd rather use the main repo instead of a fork. (no offense @sakabako) |
|
No offense taken! I feel flattered. What I did is good, but is hard to fit into masonry as it is. It's not a hack, but it is dirty code. Desandro should not accept this request as is, but some ideas may make it into the next version. This pull request is an artifact of a desire to push masonry to the next level. When I have some free time I'm planning on bringing my own Mosiac up to par with the logic in this pull request. |
|
@sakabako WOW. I don't know how I missed this Pull request. This is a tremendous achievement. Like you said, I feel that this feature pushes outside the scope of Masonry. While I won't merge it into master, this should probably be served as a separate project. I believe this would help a lot with issue #141 If so, I'd love to see it come to fruition, whether that be in this branch, or in Mosaic. |
|
I do think there are two things in this request that could benefit Masonry: utilizing wasted space and using a jitter to preserve left to right order. I'd be happy to make a different pull request that has just those in it, or one for each feature. There is clearly a lot of demand for using wasted space, but I think my implementation with an event might be too complicated. With the event, you receive an array of numbers and generate your own elements to fill empty places. Another way of doing it could be to give masonry an element that it will clone and insert into the wasted space, but this wouldn't allow you to combine columns into larger blocks like the event does. |
|
Yeah, I mainly need it for the vertical space fixes. I'd love it if you could just put that in as a separate pull request @sakabako! |
|
To be clear, I don't particularly care too much about the order of the elements, I just need to make sure that there is no wasted space. |
|
You may be disappointed with my solution because order was important to me, and I believe is important in most cases. I actually put effort into making the left to right order more consistent. My fork lets you fill wasted space, but not with bricks. It triggers an event and tells you where and how big the empty space is. Then you have to put something there. In #141 @stuross left a comment linking to a gist that looks like it will fill empty space by placing elements above already placed elements. While I was playing around I made a version that, if placing a brick would waste space, and the bricks above were only one column wide, it would expand the bricks above to fill all available space. This had the flaw of occasionally making VERY tall bricks, but most of the time I thought it looked better. I didn't use it because we wanted to fill wasted space with ads. I might still have it on my work computer. Conceptually there are two ways about placing elements in space. You can take elements and put them into the available space, or you can take the space and fill it with elements. You want the latter, but I don't think anyone has implemented it yet, at least not very well. |
|
Fortunately, your fork works really well for what we're looking for. So On Thu, Aug 30, 2012 at 4:12 PM, Stu Kabakoff notifications@github.comwrote:
|
|
I'm glad you like it, I'd love to see what you're making when you're done with it. Unfortunately, it sounds like the parts you like are probably the parts I was not going to leave out of the pull requests because the code is messy and has magic numbers that you might need to tweak to get it to look right (options.wastedSpaceJitter). My fork probably does make your page look better, but make sure the middle and bottom look good too. It can sometimes create long vertical strips of blocks 2 or more columns wide. |
|
We have only three sizes of block that we'll be using, and I've made some On Thu, Aug 30, 2012 at 4:56 PM, Stu Kabakoff notifications@github.comwrote:
|
|
Can you give some sample to see how it looks? I also finding way to solve the vertical space in masonry |
I have been working with masonry trying to reduce the amount of space that is left blank, make the elements appear in a more sensical, left to right, order, and to make wasted space more useful. It might make sense to divide this into multiple pull requests, but I don't know how to do that, or if it's even possible.
Reducing the amount of wasted space
Before placing a block, it will look at how much space is wasted with each placement option and choose the one that wastes the least. A jitter amount can be set in the options (options.wastedSpaceJitter) to allow it to place the block higher or further to the left if the amount of wasted space is small enough, rather than just placing it where wasted space is smallest. This reduces the wasted space by about 50% but can occasionally cause columns of whitespace at the bottom.
Making wasted space useful
A new event, masonry.wastedspace, is triggered whenever masonry is about place a brick with wasted space above, and when masonry is finished. The second argument to the callback is an array of objects with top, left (or right), width, and height properties for each column of wasted space.
Putting items in a more sensical order
A second jitter value was added to the options (options.yJitter) to allow the placement of an element further to the left if the difference between the y value of two placement options is small enough. This prevents situations where block 8 is placed to the right of block 9 because that column was 1 pixel higher.
Events