Merida Design Blog

Publicado el | Recursos / ,

Waterfall.js: Galerías estilo Pinterest en tan solo 1kb

Waterfall.js es una pequeña librería que te permite crear galerías estilo Pinterest. Es una alternativa al popular plugin Masonry pero sin depender de jQuery y es mucho más liviana, una alternativa ideal para mejorar el desempeño de tu sitio o aplicación web.

Aunque es posible crear este efecto usando solamente CSS mediante Flexbox o columnas, son soluciones limitadas ya que es necesario conocer la estructura de los datos de antemano, pero generalmente los datos son dinámicos y se desconocen, por lo que es necesario usar javascript y un algoritmo decente que funcione sin importar la estructura de los datos.

La única limitante de esta librería, es que todas las columnas deben tener el mismo ancho.


Como obtenerla

Usando bower

    bower install waterfall.js

Usando npm

    npm install waterfall

Descargala directamente
Waterfall.js


Como se usa

Define la estructura HTML

<div class="my-grid">
    <div class="item">Solid Snake</div>
    <div class="item">Riou</div>
    <div class="item">Jack Russel</div>
    <div class="item">Red</div>
    <div class="item">Sonic</div>
    <div class="item">Megaman</div>
</div>

Ejecuta la función Waterfall con tu grid como argumento y la librería se encarga del resto.

waterfall('.my-grid');

// O también:
var grid = document.querySelector('my-grid');
waterfall(grid);

Página: http://raphamorim.com/waterfall.js



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: