flickr / justified-layout

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

Flickr's Justified Layout

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:

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.

justified-layout's Issues

Merge version 1.2.0 vulnerability

Merge 1.2.0 has a high severity vulnerability: https://nvd.nist.gov/vuln/detail/CVE-2018-16469#VulnChangeHistorySection

Can we upgrade merge to 1.2.1? It looks like pull request #48 will do the trick.

Documentation of widowCount

What does widowCount mean? In the tests, it sometimes appears as a number of 1 or 0, but I have no idea why and the documentation does not say (or I missed it).

How to use with RWD

Hi there,

It's more a question than an issue but I noticed Flickr's Explore page have a responsive layout for the image grid and the demo page doesn't seem to explain how achieve that.

Am I supposed manually add an eventListener and dynamically calculate containerWidth, send it to justifiedLayout function and rerun it for it to work? Or is it a better method hidden somewhere that you didn't documented.

Row number

Is there a way to get the row number an item is on returned in the generated results?

need feedback

Hello,

I'm more photographer than developer but I still would like to use this fantastic layout for my website.

As this lib return only the math it's pretty hard to use in a real case for someone like me.

I've still manage to write some kind of class to use it
It's actually working but not perfect as I have some issues:

• when using showwidows it's return an error and stop working
• when using fullWidthBreakoutRowCadence the layout is broken (height not justified at all)
• the layout is not perfectly justified on the right side (there's already an issue but unfixed)

Could a kind soul have a look to my code?
I would also be interested to see how you are using this library for a photo gallery.

Thank you so much

html markup:

<div class="photos-grid">

  <div class="photo-card" data-width="400" data-height="250">
    <img src="image1.jpg">
  </div>

  <div class="photo-card" data-width="350" data-height="180">
    <img src="image2.jpg">
  </div>

</div>

Instantiate the class:
new GridLayout('.photos-grid',
{
containerPadding: 20,
boxSpacing: 5,
showWidows: false
})

gridLayout Class:

import justifiedLayout from 'justified-layout'

// GRID
// ===========================

export default class gridLayout {
  // gridLayout constructor
  constructor (selector, param) {
    // defaults configuration
    const defaults = {
      elementWrapper: '.photo-card',
      containerPadding: 0,
      boxSpacing: 0
    }

    this.config = Object.assign({}, defaults, param)

    this.gridWrapper = document.querySelector(selector)

    this.gridElements = Array.prototype.slice.call(this.gridWrapper.querySelectorAll(this.config.elementWrapper))

    this.init()
  }

  // init grid layout
  init () {
    let gridWrapperWidth = this.gridWrapper.offsetWidth

    let elementsSizes = this.gridElements.map((element) => {
      return {
        width: element.dataset.width,
        height: element.dataset.height
      }
    })

    let rowHeight
    if (window.matchMedia('(max-width: 30em)').matches) {
      rowHeight = 100
    } else if (window.matchMedia('(max-width: 48em)')) {
      rowHeight = 200
    } else if (window.matchMedia('(max-width: 60em)')) {
      rowHeight = 300
    } else if (window.matchMedia('(max-width: 80em)')) {
      rowHeight = 400
    } else if (window.matchMedia('(max-width: 100em)')) {
      rowHeight = 500
    }

    let dimensionsParam = {
      containerWidth: gridWrapperWidth,
      targetRowHeight: rowHeight
    }

    let finalConfig = Object.assign(this.config, dimensionsParam)

    let geometry = justifiedLayout(elementsSizes, finalConfig)

    function zip (arrays) {
      return arrays[0].map((_, i) => {
        return arrays.map((array) => array[i])
      })
    }

    // Resize Elements
    let gridElementsArray = zip([this.gridElements, geometry.boxes])

    for (let i = 0; i < gridElementsArray.length; i++) {
      let element = gridElementsArray[i][0]
      let box = gridElementsArray[i][1]

      element.setAttribute('style', `
        width: ${box.width}px;
        height: ${box.height}px;
        top: ${box.top}px;
        left: ${box.left}px
      `)
    }

    // Resize Grid
    this.gridWrapper.style.height = geometry.containerHeight + 'px'
  }
}

Varying row height

Hey all!

Wondering if there's a way to vary the row height. I'd like to have the first two rows be tall and the rest a fixed height.

Thanks!

Responsive in full width container

Hi, is there any example for using this to achieve responsiveness in a fluid container?
Thanks in advance...

Config for centering elements in widows

Hello,
Do you think is it possible to add a configuration parameter for allowing user to choose how elements in widows row will be rendered?
These elements are displayed on the left, it should be great if we can set to the center like this:

• rowAlign: left (default)

❏❏❏❏❏
❏❏❏❏❏
❏

• rowAlign: center (my need 😉)

❏❏❏❏❏
❏❏❏❏❏
  ❏

• rowAlign: right

❏❏❏❏❏
❏❏❏❏❏
    ❏

How to add content to the layout

The justified layout is great, but I don't know how to add content to the layout and can you give an example?

Improper width calculation

Hi,
have faced some issues with calculations when using [{width, height}] as an input.
Here is a simple example demonstrating the problem:

var justifyLayout = require('justified-layout');

var initialSizes = [
 { "width": 350, "height": 197 },
 { "width": 350, "height": 197 },
 { "width": 320, "height": 190 },
 { "width": 346, "height": 194 }
];

var justified = justifyLayout(initialSizes, {
  containerWidth: 1000,
  targetRowHeight: 150,
  targetRowHeightTolerance: 0,
  boxSpacing: 0,
  containerPadding: 0
});

/* resulted matrix
{
  "containerHeight": 142,
  "widowCount": 0,
  "boxes": [{
      "aspectRatio": 1.7766497461928934,
      "top": 0,
      "width": 252,
      "height": 142,
      "left": 0
    }, {
      "aspectRatio": 1.7766497461928934,
      "top": 0,
      "width": 252,
      "height": 142,
      "left": 252
    }, {
      "aspectRatio": 1.6842105263157894,
      "top": 0,
      "width": 239,
      "height": 142,
      "left": 504
    }, {
      "aspectRatio": 1.7835051546391754,
      "top": 0,
      "width": 253,
      "height": 142,
      "left": 743 // 253 + 743 = 996
    }]
}
*/

console.log(justified.boxes.reduce((m, c) => m + c.width, 0)); // 996

One would expect compound width to be equal to containerWidth?
And of course, as a result of that, a layout is not properly justified.
Am I missing something?

containerHeight returns [objectObject] when using containerPadding: 0

justifiedLayout([1], {containerPadding: 0})

returns

Is Justified Layout abandon?

Last release is one year old, some bug aren't fixed...

It could be nice to let people know what are your plan to let us consider or not this library for long term use.

I hope community and you will make this alive again, It's such a nice plugin!

Cheers

why need `top` and `left` ?

because float or inline-block have some drawbacks, I guess, right?

dist folder missing

Had to npm-install to grab justified-layout.js since it isn't in the source tree on github.

handle orphans case

Hi!
I have no idea why nextToLastRowHeight use height here.
In some case, it'll make box out of container.
Here is the options
{ sizes: [ { width: 2000, height: 1500, }, { width: 500, height: 332, } ], config: { targetRowHeightTolerance: 0, containerPadding: 0, boxSpacing: 8, containerWidth: 280, targetRowHeight: 140, } }

some code wrong ?

https://github.com/flickr/justified-layout/blob/master/lib/index.js#L65

Minimize/remove occurrence of widows while still showing all the images

Is there a way to minimize the occurrence of widows in the image gallery, but still showing all of the images?

For example, the Unite library never has widow images, but it also never crops the images (and shows all images), and it seems like that is all done without adjusting the images' heights too much.

I really like your library (minimal UI, small size, implementation up to me), but I won't be able to use it until there aren't widow items.

gh-pages: Mixed content on https://flickr.github.io/justified-layout/

https://flickr.github.io/justified-layout/ currently has mixed content issues because it’s loading http://yui.yahooapis.com/pure/0.6.0/pure-min.css over HTTP. Sadly, that server doesn’t seem to support HTTPS, so it can’t be fixed just by updating the scheme.

Would you be open to a pull request that switches to https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css?

P.S. Who should I talk to to get http://yui.yahooapis.com/* to run over HTTPS?

Wide image getting cropped when window width is small

I have a gallery of 8 or 9 images, 2 of which are very wide (width-height ratio of 5 or so). When I view the gallery on a narrow window width (where the images are mostly 1 to a row), the wide images get cropped on their x-axis.

Is it possible to make it so that no images will ever be cropped? I could see that in this case, it could just make the row the image is on be shorter so the whole image would still show.

Return in the box config hasWidow

It would be nice to return in the layout config if the last row is a widow row or a full row.

Lychee docker

So how would I get this deployed to work with Lychee on docker image running on unraid? I would VERY much like to mimic the flickr layout for stream and folder views.

Aspect ratio of full width box not calculated properly

I have an issue with full width boxes that pass the fullWidthBreakoutRowCadence condition.
In my case I have all boxes with same aspect ratio (1.5), everything works fine until the container gets ~1080px wide, then when it gets wider full width boxes start to lose their aspect ratio and a content in them overlaps.

I guess I'm looking for option to set forceAspectRatio: true only to full width boxes, but afaik that's currently not possible, or am I missing something?

Here is the codepen with the issue reproduced: https://codepen.io/anon/pen/YdprBN