Masonry component [WIP]

[bvaughn]

Demo video: https://t.co/KquWlIIBJe

Overview

This component efficiently displays arbitrarily positioned cells using windowing techniques. Cell position is determined by an injected cellPositioner property. Windowing is vertical; this component does not support horizontal scrolling.

Rendering:

Rendering occurs in two phases:

1. First phase uses estimated cell sizes (provided by the cache) to determine how many cells to measure in a batch. Batch size is chosen using a fast, naive layout algorithm that stacks images in order until the viewport has been filled. After measurement is complete (componentDidMount or componentDidUpdate) this component evaluates positioned cells in order to determine if another measurement pass is required (eg if actual cell sizes were less than estimated sizes). All measurements are permanently cached (keyed by keyMapper) for performance purposes.
2. Second phase uses the external cellPositioner to layout cells. At this time the positioner has access to cached size measurements for all cells. The positions it returns are cached by Masonry for fast access later. Phase one is repeated if the user scrolls beyond the current layout's bounds. If the layout is invalidated due to eg a resize, cached positions can be cleared using recomputeCellPositions().

Animation constraints:

• Simple animations are supported (eg translate/slide into place on initial reveal).
• More complex animations are not (eg flying from one position to another on resize).

Layout constraints:

• This component supports multi-column layout.
• The height of each item may vary.
• The width of each item must not exceed the width of the column it is "in". (Items may not span multiple columns.)
• The left position of all items within a column must align.