Creating A Flickr-style Justified Layout With JavaScript

Category: Javascript , Layout , Recommended | August 16, 2018
Author: flickr
Views Total: 2,077
Official Page: Go to website
Last Update: August 16, 2018
License: MIT

Preview:

Creating A Flickr-style Justified Layout With JavaScript

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:

v2.1.1 (08/16)

  • Fix block comment spacing

You Might Be Interested In:

Leave a Reply