Creación de un diseño justificado de estilo flickr con JavaScript

Vista prévia

Descripción

Una biblioteca JavaScript independiente y sin CSS que le permite crear un diseño justificado al estilo de Flickr para su galería de fotos.

Instalación

# Yarn
$ yarn add justified-layout

# NPM
$ npm install justified-layout --save

Funcionamiento

Sólo tiene que descargar e incluir el script justified-layout. js en su página web y estamos listos para ir.

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

Cree un diseño justificado y pase en tamaños de caja como este:

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

Opciones de configuración disponibles con valores predeterminados.

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



})

Registro de cambios

v2.1.1 (08/16)

• Corrija el espaciado de comentario de bloque