6.2 KiB
Isotope: An exquisite jQuery plugin for magical layouts
Features
- Layout modes: Intelligent, dynamic layouts that can't be achieved with CSS alone.
- Filtering: Hide and reveal item elements easily with jQuery selectors.
- Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything.
- Interoperability: features can be utilized together for a cohesive experience.
- Progressive enhancement: Isotope's animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.
Licensing
Commercial use of Isotope requires purchase of one-time license fee per developer seat. Commercial use includes any application that makes you money — portfolio sites, premium templates, etc. Commercial licenses may be purchased at metafizzy.co.
Use in non-commercial and personal applications is free.
Getting started
Isotope requires jQuery 1.4.3 and greater.
Markup
Isotope works on a container element with a group of similar child items.
{% highlight html %}
{% endhighlight %}
Script
{% highlight javascript %}
$('#container').isotope({ // options itemSelector : '.item', layoutMode : 'fitRows' });
{% endhighlight %}
There are a number of options you can specify. Within the options is where you can set the layout mode, filter items, and sort items.
Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed.
{% highlight javascript %}
$('#container').isotope({ filter: '.my-selector' }, function( $items ) { var id = this.attr('id'), len = $items.length; console.log( 'Isotope has filtered for ' + len + ' items in #' + id ); });
{% endhighlight %}
Within this callback this refers to the container, and $items refers to the item elements. Both of these are jQuery objects and do not need to be put in jQuery wrappers.
CSS
Add these styles to your CSS for filtering, animation with CSS transitions, and adding items.
{% highlight css %}
/**** Isotope Filtering ****/
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; }
{% endhighlight %}
Code repository
This project lives on GitHub at github.com/desandro/isotope. There you can grab the latest code and follow development.
A word about moderation {: #moderation}
Isotope enables a wealth of functionality. But just because you can take advantage of its numerous features together, doesn't mean you necessarily should. For each each feature you implement with Isotope, consider the benefit gained by users, at the cost of another level of complexity to your interface.
Acknowledgments
- "Cowboy" Ben Alman for jQuery BBQ (included with docs)
- Louis-Rémi Babé for jQuery smartresize (used within Isotope) and for jQuery transform which clued me in to using jQuery 1.4.3's CSS hooks
- Jacek Galanciak for jQuery Quicksand, an early kernel of inspiration
- Ralph Holzmann for re-writing the jQuery Plugins/Authoring tutorial and opened my eyes to Plugin Methods pattern
- Eric Hynds for his article Using $.widget.bridge Outside of the Widget Factory which provided the architecture for Isotope
- Paul Irish for Infinite Scroll (included with docs), the imagesLoaded plugin (included with Isotope), and Debounced resize() plugin (provided base for smartresize)
- The jQuery UI Team for $.widget.bridge (partially used within Isotope)
- The Modernizr team for Modernizr (partially used within Isotope)
- Juriy Zaytsev aka "kangax" for getStyleProperty (used within Isotope)