Author: | flickr |
---|---|
Views Total: | 470 views |
Official Page: | Go to website |
Last Update: | January 6, 2021 |
License: | MIT |
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