/justified-layout

Pass in box sizes and get back sizes and coordinates for a justified layout
  1. JavaScript 94.3%
  2. HTML 5.7%
JavaScript HTML

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Download ZIP
Find file
Switch branches/tags
Nothing to show
Latest commit d79dac7 Sep 1, 2016 Eric Willis 2.1.0
Permalink
Failed to load latest commit information.
lib Added support for centered widow rows Aug 25, 2016
test Added support for centered widow rows Aug 25, 2016
.eslintignore Lint everything Aug 19, 2016
.eslintrc.js Keep license comments in the minified dist file Aug 19, 2016
.gitignore
.travis.yml Move coverage script into npm scripts Aug 19, 2016
LICENSE initial commit Mar 29, 2016
README.md Returning widowCount property in the response. May 4, 2016
demo.html initial commit Mar 29, 2016
package.json 2.1.0 Sep 1, 2016

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.