Biblioteca de JavaScript de diseño de cuadrícula flexible adaptable-cuadrícula impresionante

Vista prévia

Descripción

Esta es la versión de JavaScript puro de jQuery < a href = "http://www.jqueryscript.net/layout/Simple-Clean-jQuery-Responsive-Grid-Layout-Plugin-Awesome-Grid.html" > awesome Grid plugin que le ayuda a renderizar dinámicamente una respuesta, diseño de cuadrícula personalizable, amigable con el móvil y de Pinterest desde una lista HTML normal.

Install:

# NPM
$ npm install awesome-grid

# Bower
$ bower install awesome-grid

¿Cómo funciona?

Inserte la versión minimizada de la cuadrícula impresionante en la página HTML.

<script src="awesome-grid.min.js"></script>

La estructura básica de HTML para la rejilla impresionante.

<ul class="grid">


<li>01</li>


<li>02</li>


<li>03</li>


<li>04</li>


<li>05</li>


...
</ul>

Cree una nueva instancia de AwesomeGrid y especifique el número de columnas que se representará.

new AwesomeGrid('ul.grid').grid(5);

Configuración de la rejilla impresionante a través de los atributos ' datos ':

• Data-AG-gutters-Column: añadiendo espaciado entre columnas
• Data-AG-gutters-Row: agregando espacio entre filas
• Data-AG-gutters: agregando espacio entre filas y columnas
• Data-AG-x = "3 ″: el elemento de lista se estirará/ampliará tres veces de lo normal (uno).

Todas las opciones de configuración predeterminadas.

new AwesomeGrid('ul.grid', {



// or 'self'


context: 'window',



 // custom breakpoints


mobile: 420,


tablet: 768,


desktop: 992,


tv: 1200



})