1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
# Flickr's Justified Layout
[](https://travis-ci.org/flickr/justified-layout) [](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 <a href="https://www.flickr.com/explore">explore page</a> is a great example. Here's
another example using the `fullWidthBreakoutRowCadence` option on Flickr's
<a href="https://www.flickr.com/photos/dataichi/albums/72157650151574962">album page</a>.
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:
## 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.
|
