Isotope – Un plugin jQuery exquisito para diseños mágicos

Isotop es un plugin de jQuery que nos permite implementar diseños inteligentes y dinámicos que no se pueden implementar únicamente con CSS. Se trata de aplicar una combinación de jQuery y CSS.

El plugin nos permite:

• Filtrar contenidos, ocultando y mostrando elementos fácilmente con selectores jQuery.
• Clasificar u ordernar elementos.
• Cargar contenido a medida que se va haciendo scroll
• etc.

En el ejemplo que vamos ilustrar, vamos a implementar un filtro de búsqueda con efectos de transición muy elegantes. Los elementos con los que vamos a jugar van a ser marcas y modelos de coches. Tendremos un menú para filtrar por marca.

Isotope trabaja en un elemento contenedor con un grupo de elementos secundarios similares.

Isotope requiere jQuery 1.4.3 o superior.

Cada elemento tiene varias clases de identificación. En este caso,  transition, metal, lanthanoid, alkali, etc. En el caso del ejemplo en funcionamiento, vamos a utilizar el class=»metal».

<div id="container">
  <div class="element seat metal">...</div>
  <div class="element peugeot metal">...</div>
  <div class="element renault metal">...</div>
  <div class="element citroen metal">...</div>
  ...
</div>
>

Después tendremos nuestro menú para filtrar por marca:

<ul id="filters">
    <li><a href="#" data-filter="*">Mostrar Todo</a></li>
    <li><a href="#" data-filter=".seat">Seat</a></li>
    <li><a href="#" data-filter=".peugeot">Peugeot</a></li>
    <li><a href="#" data-filter=".renault">Renault</a></li>
    <li><a href="#" data-filter=".citroen">Citroen</a></li>
    <li><a href="#" data-filter=".opel">Opel</a></li>
</ul>

Ahora solo queda añadir la librería jQuery, el plugin isopote y su llamada, además del código de ejecución tras pulsar en un elemento del filtro de marcas.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script>
$(function(){
    var $container = $('#container');
    $container.isotope({
          itemSelector : '.element'
    });

    $('#filters a').click(function(){
          var selector = $(this).attr('data-filter');
          $container.isotope({ filter: selector });
          return false;
    });
});
</script>

Ver más información

Ver ejemplo en funcionamiento