Biblioteca de diseño de mampostería ligera-Macy. js

Vista prévia

Descripción

Macy. js es una biblioteca de JavaScript ligera e independiente para crear un diseño de mampostería y < a href = "https://wikicss.com/tag/pinteres-layout/" > Pinterest-like Grid que muestra imágenes en columnas verticales dinámicas y receptivas.

Install the Macy.js:

# Yarn
yarn add macy

# NPM
$ npm install macy

# Bower
$ bower install macy

¿Cómo funciona?

Incluya la hoja de estilos principal ' Macy. css ' en el encabezado de la Página Web.

<link rel="stylesheet" href="assets/css/macy.css">

Incluya la versión minimizada de la biblioteca Macy. js en la parte inferior de la Página Web.

<script src="assets/js/macy.min.js"></script>

Agregue sus imágenes al diseño de mampostería como estas:

<div id="my-macy-container">

<div class="demo"><img src="1.jpg" alt=""></div>

<div class="demo"><img src="2.jpg" alt=""></div>

<div class="demo"><img src="3.jpg" alt=""></div>

<div class="demo"><img src="4.jpg" alt=""></div>

<div class="demo"><img src="5.jpg" alt=""></div>

...
</div>

Inicialice la biblioteca Macy. js con algunas opciones.

Macy({

container: '#my-macy-container'
});

Especifique el número de columnas que se mostrarán en diferentes resoluciones de pantalla.

Macy({

container: '#my-macy-container',

columns: 6, // default

breakAt: {


1200: 5,


940: 3,


520: 2,


400: 1

}
});

Más opciones de configuración con valores predeterminados.

Macy({


// space between images

margin: 2,


// false = prioritise equalising the height of each column over the order of the items themselves.

trueOrder: true,


// renders the layout after images are completely loaded

waitForImages: false,


// uses image loader

useImageLoader: true,


// uses another image loader library

useOwnImageLoader: false,


// setting this value to true will alter how the breakAt options will work.

 mobileFirst: false

});

API methods.

// recalculates the entire layout
macyInstance.recalculate();

// do something each time and image loads or after all images have been loaded
macyInstance.runOnImageLoad(function () {

macyInstance.recalculate(true);
}, true);

// removes the layout
macyInstance.remove();

// re-init the layout
macyInstance.reInit();

Registro de cambios

v2.3.1 (10/08/2018)

• Se soluciona un problema en el que las consultas de medios no se activarán en los mismos puntos que Macy debido a una barra de desplazamiento
• Añadir soporte móvil primero a través de una opción