Creating A Flickr-style Justified Layout With JavaScript

Preview:

Description:

A standalone, CSS-less JavaScript library that lets you create a Flickr-style justified layout for your photo gallery.

Installation:

# Yarn
$ yarn add justified-layout
# NPM
$ npm install justified-layout --save

How to use it:

Just download and include the justified-layout.js script into your webpage and we’re ready to go.

<script src="dist/justified-layout.js"></script>

Create a justified layout and pass in box sizes like this:

var geometry = justifiedLayout([0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1])

Available configuration options with default values.

var geometry = justifiedLayout([0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1],{
    // The width that boxes will be contained within irrelevant of padding.
    containerWidth: 1060,
    // Provide a single integer to apply padding to all sides or provide an object to apply individual values to each side
    containerPadding: 10,
    // Provide a single integer to apply spacing both horizontally and vertically or provide an object to apply individual values to each axis
    boxSpacing: 10,
    // 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.
    targetRowHeight: 320,
    // 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.
    targetRowHeightTolerance: 0.25,
    // Will stop adding rows at this number regardless of how many items still need to be laid out.
    maxNumRows: Number.POSITIVE_INFINITY,
    // 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.
    forceAspectRatio: false,
    // 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.
    showWidows: true,
    // 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.
    fullWidthBreakoutRowCadence: false
    
})

Changelog:

v4.1.0 (01/06/2021)

• removes dependency on merge completely (replacing it with Object.assign)

v4.0.0 (05/06/2020)

• Upgrades a bunch of devDependencies

v3.0.0 (11/26/2019)

• Update

v2.1.1 (08/16/2018)

• Fix block comment spacing