Generador dinámico de diseño de rejilla-Magic Grid

Vista prévia

Descripción

Magic Grid es una biblioteca de JavaScript ligera (3Kb minificada) para generar un diseño dinámico y flexible de Grid Using Pure JavaScript.

Funcionamiento

Instale & descargar.

# NPM
$ npm install magic-grid --save

Cargue la versión minimizada de la biblioteca de Magic Grid en el documento HTML.

<script src="/dist/magic-grid.umd.js"></script>

Cree un contenedor para colocar el diseño de cuadrícula.

<div class="container">


</div>

Cree un diseño de cuadrícula dinámica y especifique el número de elementos de cuadrícula que se generarán.

let magicGrid = new MagicGrid({


container: "#container",


items: 20
});

magicGrid.listen();

Cree un diseño de cuadrícula estática a partir de elementos de cuadrícula existentes.

<div class="container">

<div class="item1">1</div>

<div class="item2">2</div>

<div class="item3">3</div>

<div class="item4">4</div>

<div class="item5">5</div>

<div class="item6">6</div>

<div class="item7">7</div>

<div class="item8">8</div>

<div class="item9">9</div>

<div class="item10">10</div>
</div>

let magicGrid = new MagicGrid({


static: true
});

magicGrid.listen();

Establezca el espacio entre los elementos de rejilla. Por defecto: 25px.

let magicGrid = new MagicGrid({


gutter: 30
})

Establezca el número máximo de elementos de cuadrícula.

let magicGrid = new MagicGrid({


maxColumns: 100
})

Decida si desea anexar el siguiente elemento a la columna más corta.

let magicGrid = new MagicGrid({


useMin: false
})

Activar/desactivar la animación al cambiar el tamaño de la pantalla.

let magicGrid = new MagicGrid({


animate: false
})

Desencadenar una función de reposicionamiento después de agregar nuevos elementos de cuadrícula al diseño de cuadrícula.

magicGrid.positionItems();

Registro de cambios

v3.2.3 (03/03/2019)

• actualizar

v3.2.2 (01/21/2019)

• Permitir 0 canalón

v3.2.0 (01/17/2019)

• Posición con traducir

v3.1.5 (01/16/2019)

• Posición con traducir

v3.1.4 (01/15/2019)

• contenedor get en la función getReady

v3.1.2 (12/27/2018)

• Refactorizarizar

v3.1.1 (12/27/2018)

• Guardar ancho de columna en configuración y positionItems.

v3.1.0 (12/25/2018)

• Refactorizarizar

v3.0.10 (12/25/2018)

• Detector de ventanas de aceleración. Se ha quitado la función getMax.

v3.0.8 (11/21/2018)

• cheque listo modificado

11/18/2018

• no hay un canalón superior en la primera fila

11/17/2018

• contenedor elástico a la altura de la rejilla

11/15/2018

• Refactorizar