Tiny Pinterest inspirado diseño de cuadrícula adaptable en Vanilla JS-Gridify

Vista prévia

Descripción

Gridify es un pequeño complemento de JavaScript de vainilla que se utiliza para generar un diseño de cuadrícula fluida con respuesta inspirada en Pinterest (a. k. un diseño de mampostería) de un grupo de elementos con diferente anchura & altura.

See also:

• Top 10 diseños de cuadrícula responsive de JavaScript & CSS

Funcionamiento

Agregue elementos (p. ej., imágenes) al diseño de la cuadrícula de la siguiente manera:

<div class="grid">

<div class="grid--item">


<img src="img/1.jpg" />

</div>

<div class="grid--item">


<img src="img/2.jpg" />

</div>

<div class="grid--item">


<img src="img/3.jpg" />

</div>

<div class="grid--item">


<img src="img/4.jpg" />

</div>

<div class="grid--item">


<img src="img/5.jpg" />

</div>

<div class="grid--item">


<img src="img/6.jpg" />

</div>

<div class="grid--item">


<img src="img/7.jpg" />

</div>

<div class="grid--item">


<img src="img/8.jpg" />

</div>

<div class="grid--item">


<img src="img/9.jpg" />

</div>

<div class="grid--item">


<img src="img/10.jpg" />

</div>
</div>

Descargue e inserte la versión minimizada del plugin Gridify en la página HTML.

<script src="/dist/gridify.min.js"></script>

Inicializar el plugin Gridify y listo.

const gridify = new Gridify();

Override the default selectors to fit your needs.

const gridify = new Gridify({



containerSelector: '.grid',



itemSelector: '.grid--item',



columnSelector: '.grid--column'
});

Determine si re-init o no el plug-in cuando la ventana cambia de tamaño.

const gridify = new Gridify({



resizable: true
});

Dispara un evento al cambiar el tamaño.

const gridify = new Gridify({



onResize: () => {




console.log('grid resized');



}
});