desandro/masonry — pull request #206 by sakabako (2012-05-30 18:35:04+00:00)
Title: Reducing wasted space, making wasted space useful, item ordering, events.

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

Two events were added. masonry.wastedspace is called whenever masonry is about place a brick with wasted space above and when masonry is finished. Each time a brick is placed the whitespace above is calculated and the event is triggered. The second argument to the callback is an array of objects with top, left (or right), width, and height properties.

#### 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 different 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
- masonry.wastedspace
- masonry.beforelayout
- masonry.complete