Crear diseño de rejilla de albañilería con vainilla JavaScript-Gridify
| Autor: | richardhedges |
|---|---|
| Views Total: | 174 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 25, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Gridify es un plugin de diseño de JavaScript vainilla que se utiliza para organizar los elementos de cuadrícula en un diseño de estilo de albañilería usando JavaScript puro.
Funcionamiento
Inserte los elementos en el diseño de cuadrícula y especifique el número de columnas en el atributo Data-gridify :
<div data-gridify="4-columns"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> ... </div>
Cargue la versión minimizada de la biblioteca de Gridify al final del documento.
<script src="gridify.min.js"></script>
Inicializar el Gridify.
window.onload = function() {
gridify.init();
}; Establezca el ancho de los elementos de rejilla.
.column.size-1of4 {
width: 25%;
float: left;
} Anexar más elementos al diseño de cuadrícula. Ideal para scroll infinito.
gridify.appendElements(array); gridify.appendItem(dom);
Más métodos PAI.
// re-init the layout gridify.reInit(); // destroy the layout gridify.destroy();
