Pass in box sizes and get back sizes and coordinates for a nice justified layout like that seen all
over Flickr. The explore page is a great example. Here's
another example using the fullWidthBreakoutRowCadence option on Flickr's
album page.
It converts this:
[0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1]Into this:
{
"containerHeight": 1269,
"widowCount": 0,
"boxes": [
{
"aspectRatio": 0.5,
"top": 10,
"width": 170,
"height": 340,
"left": 10
},
{
"aspectRatio": 1.5,
"top": 10,
"width": 510,
"height": 340,
"left": 190
},
...
]
}Which gives you everything you need to make something like this:
npm install justified-layout
var layoutGeometry = require('justified-layout')([1.33, 1, 0.65] [, config])Find it here: https://flickr.github.io/justified-layout/
Open Source Licensed under the MIT license.