justified-layout
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/justified-layout package

    4.1.0 • Public • Published

    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.

    Install

    npm i justified-layout

    DownloadsWeekly Downloads

    2,636

    Version

    4.1.0

    License

    ISC

    Unpacked Size

    55 kB

    Total Files

    8

    Last publish

    Collaborators

    • alex-seville
    • jeremyruppel
    • superic
    • pdokas