Skip to content
master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.

README.md

Flickr's Justified Layout

Build Status Coverage Status

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:

Demonstration

Install

npm install justified-layout

Easy Usage

var layoutGeometry = require('justified-layout')([1.33, 1, 0.65] [, config])

Full Documentation and Examples

Find it here: http://flickr.github.io/justified-layout/

License

Open Source Licensed under the MIT license.

You can’t perform that action at this time.