https://github.com/flickr/justified-layout

Pass in box sizes and get back sizes and coordinates for a justified layout
https://github.com/flickr/justified-layout

Last synced: 1 day ago
JSON representation

Pass in box sizes and get back sizes and coordinates for a justified layout

• Host: GitHub
• URL: https://github.com/flickr/justified-layout
• Owner: flickr
• License: mit
• Created: 2016-02-02T19:50:42.000Z (almost 9 years ago)
• Default Branch: main
• Last Pushed: 2023-09-05T21:20:40.000Z (over 1 year ago)
• Last Synced: 2024-10-29T15:01:46.114Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://flickr.github.io/justified-layout/
• Size: 149 KB
• Stars: 1,598
• Watchers: 61
• Forks: 87
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Flickr's Justified Layout

[![Build Status](https://travis-ci.org/flickr/justified-layout.svg?branch=master)](https://travis-ci.org/flickr/justified-layout) [![Coverage Status](https://coveralls.io/repos/github/flickr/justified-layout/badge.svg?branch=master)](https://coveralls.io/github/flickr/justified-layout?branch=master)

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:

```js

[0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1]

```

Into this:

```js

{

    "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](https://cloud.githubusercontent.com/assets/43693/14033849/f5cffb58-f1da-11e5-9763-dce7e90835e1.png)

## Install

`npm install justified-layout`

## Easy Usage

```js

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.