Skip to content

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

License

Notifications You must be signed in to change notification settings

nk-o/better-justified-layout

Repository files navigation

Justified Layout by Flickr... but better 🤩

A fork of flickr/justified-layout containing different improvements. We maintain it because it is used in https://github.com/nk-o/flickr-justified-gallery and https://visualportfolio.co/

better-justified-layout.min.js

Pass in box sizes and get back sizes and coordinates for a nice justified layout like that seen all over Flickr. The Visual Portfolio site is a great example.

Table of Contents

Quick Start

Usage

import justifiedLayout from 'better-justified-layout';

const layoutGeometry = justifiedLayout([0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1]);

Example

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,
      "row": 0
    },
    {
      "aspectRatio": 1.5,
      "top": 10,
      "width": 510,
      "height": 340,
      "left": 190,
      "row": 0
    },
    ...
  ]
}

Install

npm install better-justified-layout

Import

Use one of the following examples to import script.

ESM

We provide a version of better-justified-layout built as ESM (better-justified-layout.esm.js and better-justified-layout.esm.min.js) which allows you to use it as a module in your browser, if your targeted browsers support it.

<script type="module">
  import justifiedLayout from "better-justified-layout.esm.min.js";
</script>

ESM CDN

<script type="module">
  import justifiedLayout from "better-justified-layout.esm.min.js@4.2/+esm";
</script>

CJS

Import better-justified-layout by adding this line to your app's entry point (usually index.js or app.js):

import justifiedLayout from 'better-justified-layout';

Options

No configuration is required but chances are you'd like to change some things. Here are your options:

Name Type Default Description
containerWidth int 1060 The width that boxes will be contained within irrelevant of padding.
containerPadding int, object 10 Provide a single integer to apply padding to all sides or provide an object to apply individual values to each side.
boxSpacing int, object 10 Provide a single integer to apply spacing both horizontally and vertically or provide an object to apply individual values to each axis.
targetRowHeight int 320 It's called a target because row height is the lever we use in order to fit everything in nicely. The algorithm will get as close to the target row height as it can.
targetRowHeightTolerance float 0.25 How far row heights can stray from targetRowHeight. 0 would force rows to be the targetRowHeight exactly and would likely make it impossible to justify. The value must be between 0 and 1.
maxNumRows int Number.POSITIVE_INFINITY Will stop adding rows at this number regardless of how many items still need to be laid out.
edgeCaseMinRowHeight float 0.5 Sets the minimum height for each row in a layout, based on the targetRowHeight
edgeCaseMaxRowHeight float 2.5 Sets the maximum height for each row in a layout, based on the targetRowHeight
forceAspectRatio bool, float true Provide an aspect ratio here to return everything in that aspect ratio. Makes the values in your input array irrelevant. The length of the array remains relevant.
showWidows bool true By default we'll return items at the end of a justified layout even if they don't make a full row. If false they'll be omitted from the output.
fullWidthBreakoutRowCadence bool, int false If you'd like to insert a full width box every n rows you can specify it with this parameter. The box on that row will ignore the targetRowHeight, make itself as wide as containerWidth - containerPadding and be as tall as its aspect ratio defines. It'll only happen if that item has an aspect ratio >= 1. Best to have a look at the examples to see what this does.

License

Open Source Licensed under the MIT license.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published