<commit_before>## Perfect Layout

[DEMO](http://codepen.io/axyz/full/VLJrKr/)
[Medium Article](https://medium.com/@axyz/in-search-of-the-perfect-image-gallery-34f46f7615a1)

given an array of images in the form

```
{
  data: WATHEVER_YOU_WANT,
  src: "path/to/image.jpg",
  ratio: 1.5
}
```

returns an array of images in the form
```
{
  data: WATHEVER_YOU_WANT,
  src: "path/to/image.jpg",
  width: WIDTH,
  height: HEIGHT
}
```

where WIDTH and HEIGHT are the dimensions that image must have to fit the layout.

### Usage

on node
```
$ npm install --save perect-layout
```
and
```
var perfectLayout = require('perfectLayout')
```
while on the browser you can just
```
<script src="perfectLayout.min.js"></script>
```
then
```
var perfectRows = perfectLayout(photos, width, height);
```

This was inspired by [chromatic.io](http://www.chromatic.io/FQrLQsb) galleries
and I want to credit the [@crispymtn](https://github.com/crispymtn) team for the
original implementation.

This version aim to be more lightweight using a greedy algorithm instead of the
optimal one and also leave to the user the responsability to choose how to
manipulate the DOM accordingly to the returned array.

for convenience a jquery plugin is included for a basic usage.

assuming that a global `window.photos` array exists as specified above

```
<div id="gallery"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="jquery.perfectLayout.min.js"></script><commit_msg>fix require typo<commit_after>## Perfect Layout

[DEMO](http://codepen.io/axyz/full/VLJrKr/)
[Medium Article](https://medium.com/@axyz/in-search-of-the-perfect-image-gallery-34f46f7615a1)

given an array of images in the form

```
{
  data: WATHEVER_YOU_WANT,
  src: "path/to/image.jpg",
  ratio: 1.5
}
```

returns an array of images in the form
```
{
  data: WATHEVER_YOU_WANT,
  src: "path/to/image.jpg",
  width: WIDTH,
  height: HEIGHT
}
```

where WIDTH and HEIGHT are the dimensions that image must have to fit the layout.

### Usage

on node
```
$ npm install --save perect-layout
```
and
```
var perfectLayout = require('perfect-layout')
```
while on the browser you can just
```
<script src="perfectLayout.min.js"></script>
```
then
```
var perfectRows = perfectLayout(photos, width, height);
```

This was inspired by [chromatic.io](http://www.chromatic.io/FQrLQsb) galleries
and I want to credit the [@crispymtn](https://github.com/crispymtn) team for the
original implementation.

This version aim to be more lightweight using a greedy algorithm instead of the
optimal one and also leave to the user the responsability to choose how to
manipulate the DOM accordingly to the returned array.

for convenience a jquery plugin is included for a basic usage.

assuming that a global `window.photos` array exists as specified above

```
<div id="gallery"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="jquery.perfectLayout.min.js"></script>
{'fraction_non_alphanumeric': 0.13122923588039867, 'fraction_numerical': 0.009302325581395349, 'mean_word_length': 4.5349264705882355, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7331226', 'n_tokens_mistral': 1076, 'n_tokens_neox': 973, 'n_words': 317}