5/22/2016

JsTutorialIsotopeFilter&sortmagicallayouts

Slideshow

Tooltip

Autocomplete

Menu & Accordion

Tabs

Scroll

Lightbox

Date & Time

Maps

Charts

Drag and drop

Submit Plugin

Home / Layout / Isotope - Filter & sort magical layouts

Search
Search:

Categories:
All

Search

Isotope - Filter & sort magical layouts

Categories
Slideshow

288

Tooltip

64

Autocomplete

25

Menu & Accord

97

Tabs

30

Scroll

92

Date & Time

59

Isotope - Filter & sort magical layouts

Apr 04, 2014

Lightbox

136

Maps

24

Charts

31

Drag and drop

20

Forms

111

Validation

46

Rating

10

Mobile

31

Captcha
Media

17

Social & RSS

35

Text Editor

30

Image editor

15

File Upload

20

Tables

41

Drawing & SVG

15

in Layout

Overview

6731 views

Documents

Demos

Download

Gettingstarted
HTML
Isotope works on a container element with a group of similar child items.
<div id="container">
<div class="item">...</div>

Layout

117

Reader & Parser 31

Game

Animation

Others

56

157

<div class="item w2">...</div>

<div class="item">...</div>
...
</div>

Include the Isotope script in your site.

<script src="/path/to/isotope.pkgd.min.js"></script>

CSS

Tags
lightbox

All sizing of items is handled by your CSS.

carousel

modal box
photo editor

google map
wysiwyg

horizontal scroller
image slider

responsive slider

.item.w2 { width: 50%; }

editor
map

ajax

vertical scroller

share button

.item { width: 25%; }

jquery ui

InitializewithJavaScript
Initialize an Isotope instance as a jQuery plugin:$('#container').isotope().
var $container = $('#container');
// init

dropdown

tutorial

demos

styled

$container.isotope({
// options

http://jstutorial.com/isotopefiltersortmagicallayouts329

1/6

5/22/2016

JsTutorialIsotopeFilter&sortmagicallayouts

infowindow

facebook

metro style

datepicker

itemSelector: '.item',

jquery

layoutMode: 'fitRows'

scrollbar

dialog

sorting

});

Options
animationEngine (String): 'best-available'
Determines the jQuery method to apply styles, .css() or .animate(). Useful for relying on CSS
transitions to handle animation.
Values
'best-available': if browser supports CSS transitions, Isotope uses.css(). If not, falls back
to using.animate().
'css': Isotope uses.css()
'jquery': Isotope uses.animate()
animationOptions (Object): { queue:false, duration:800}
When jQuery is the animation engine (see above), these options will be used in .animate(). See
thejQuery API for animate optionsfor details.
Example

Recent Posts

$('#container').isotope({

Scrollbear

animationOptions: {

174 views

duration: 750,

May 09, 2016 | 0 votes

easing: 'linear',
queue: false

ajSlider - Image and Content jQuery

Plugin
996 views
Mar 04, 2016 | 1 votes

}
});

containerClass (String): 'isotope'

The class applied to the container element.

Greedy Navigation
2152 views

containerStyle (Object): { position:'relative', overflow:'hidden'}

Nov 29, 2015 | 0 votes

CSS styles applied to the container element. Relative positioning enables absolute positioning on
child items. Hidden overflow ensures that filtered items that lie outside the container do not
interfer with subsequent content.

jColumn - Make selected html

elements the same height
2164 views

filter:Selector

Oct 29, 2015 | 1 votes

Setting a filter with show item elements that match the selector, and hide elements that do not
match. Seedocs on fileringfor more details.

Clipboard.js - Modern copy to

clipboard

Values

4158 views
Oct 05, 2015 | 0 votes

'*'or''(an empty string): Shows all item elements

getSortData:Object

Most viewed of the week

An object containing one or several methods to retrieve data for Sorting. The methods receive one
parameter ($elemin the example below) which is a jQuery object representing each item element.
The methods need to return a value.

Find us on Facebook

Example
$('#container').isotope({

Javascripttutorials

getSortData : {

6,613likes

symbol : function( $elem ) {

return $elem.attr('data-symbol');
},

LikePage

number : function( $elem ) {

Share

return parseInt( $elem.find('.number').text(), 10 );

},

Bethefirstofyourfriendstolikethis

name : function ( $elem ) {

return $elem.find('.name').text();
}
}
});

hiddenClass (String): 'isotope-hidden'

The class applied to item elements hidden by Filtering.
hiddenStyle (Object): { opacity :0, scale :0.001}

http://jstutorial.com/isotopefiltersortmagicallayouts329

2/6

5/22/2016

JsTutorialIsotopeFilter&sortmagicallayouts
The style applied to item elements hidden by Filtering.
itemClass(String): 'isotope-item'
The class applied to item elements.
itemPositionDataEnabled(Boolean):false
When enabled, the position of item elements will exposed as data, which you can retrieve with
jQuerys data method with 'isotope-item-position' name space. Position is return as an object
withxandy;
Example
$('#container').isotope({
itemSelector: '.element',
itemPositionDataEnabled: true
})
// log position of each item
.find('.element').each(function(){
var position = $(this).data('isotope-item-position');
console.log('item position is x: ' + position.x + ', y: ' + position.y

);

});

itemSelector (Selector)
Restricts Isotope item elements to selector.
layoutMode (String): 'masonry'
onLayout(Function)
Similiar to a callback, onLayout is a function that will be triggered after every time an Isotope
instance runs through its layout logic.
$('#container').isotope({
onLayout: function( $elems, instance ) {
// `this` refers to jQuery object of the container element
console.log( this.height() );
// callback provides jQuery object of laid-out item elements
$elems.css({ background: 'blue' });
// instance is the Isotope instance
console.log( instance.$filteredAtoms.length );
}
});

resizable(Boolean): true
Triggers layout logic when browser window is resized.
resizesContainer (Boolean): true
Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the
container after layout. IfresizesContaineris set tofalse, be sure to set a size for the container in
your CSS, so it doesnt collapse when Isotope is triggered.
sortAscending(Boolean): true
Used with sorting. If true, items are sorted ascending: 1, 2, 3 or A, B, C. If false, items are
sorted descending Z, Y, X or 9, 8, 7.
sortBy (String)
The property name of the method within thegetSortDataoption to sort item elements.
Values
'original-order'Sorts item elements by their original order.
transformsEnabled (Boolean): true
Isotope uses CSS3 transforms to position item elements, when available in the browser.
SettingtransformsEnabled to false will disable this feature so all browsers use top/left absolute
positioning.

AdditionalCSS
If you do disable transforms, but still want to useCSS transitions, youll need add the following CSS:
.isotope .isotope-item {
-webkit-transition-property: top, left, opacity;
-moz-transition-property: top, left, opacity;
-ms-transition-property: top, left, opacity;
-o-transition-property: top, left, opacity;

http://jstutorial.com/isotopefiltersortmagicallayouts329

3/6

5/22/2016

JsTutorialIsotopeFilter&sortmagicallayouts
transition-property: top, left, opacity;
}

visibleStyle
visibleStyle (Object): { opacity :1, scale :1}
The style applied to item elements made visible by Filtering.

Layoutspecificoptions
In addition the general options listed above, certain layout modes each have their own options. In order
to avoid conflict, these options are set with an option that matches the name of the layout mode.
See docs onlayout modesfor each layout modes available options.
For example, if your layout switched frommasonrytocellsByRow:
$('#container').isotope({
masonry: {
columnWidth: 120
},
cellsByRow: {
columnWidth: 220,
rowHeight: 220
}
});

Methods
Isotope offers several methods to extend functionality. Isotopes methods follow the jQuery UI pattern.
$('#container').isotope( 'methodName', [optionalParameters] )

addItems
.isotope( 'addItems', $items, callback )

Adds item elements to the pool of item elements of the container, but does not sort, filter or layout.
SeeAdding itemsfor more details. The argument within the callback is the group of elements that were
added.
appended
.isotope( 'appended', $items, callback )

Adds item elements via addItems method, then triggers layout just for those new elements. Useful for
Infinite Scroll. SeeAdding itemsfor more details.
destroy
.isotope( 'destroy' )

Removes Isotope functionality completely. Returns element back to pre-init state.

insert
.isotope( 'insert', $items, callback )

Appends items elements to container, adds items to via addItems method, and then
triggersreLayoutmethod so new elements are properly filtered, sorted and laid-out. SeeAdding itemsfor
more details.
layout
.isotope( 'layout', $items, callback )

Positions specified item elements in layout.

layoutwill only position specified elements, and those elements will be positioned at the end of layout.
WhereasreLayoutwill position all elements in the Isotope widget.
option

http://jstutorial.com/isotopefiltersortmagicallayouts329

4/6

5/22/2016

JsTutorialIsotopeFilter&sortmagicallayouts
.isotope( 'option', options )

Sets options for plugin instance. Unlike passing options through .isotope(), using the optionmethod will
not trigger layout.
// sets multiple options
.isotope( 'option', { layoutMode: 'fitRows', filter: '.my-filter' } )

reLayout
.isotope( 'reLayout', callback )

Resets layout properties and lays-out every item element.

reloadItems
.isotope( 'reloadItems' )

Re-collects all item elements in their current order in the DOM. Useful for prepending.
remove
.isotope( 'remove', $items, callback )

Removes specified item elements from Isotope widget and the DOM.
shuffle
.isotope( 'shuffle', callback )

Shuffles order of items. SetssortByoptionto'random'.

updateSortData
.isotope( 'updateSortData', $items )

Updates the sorting data on specified item elements. This method is useful if the data within an item is
changed dynamically after Isotope has been initialized.

Layoutmodes
Horizontal layouts
cellsByColumn
cellsByRow
fitColumns
fitRows
masonry
masonryHorizontal
straightAcross
straightDown

More information at:http://isotope.metafizzy.co/v1/docs/introduction.html

Share
Tagged with:

Tweet

ISOTOPE

REVEAL ITEM ELEMENTS

Like

MAGICAL LAYOUTS
SORTING

Share

LAYOUT MODES

RE-ORDER ITEM ELEMENTS

Share

DYNAMIC LAYOUTS
SORTING DATA

INTELLIGENT LAYOUTS

FILTERING

INTEROPERABILITY

Related Articles

http://jstutorial.com/isotopefiltersortmagicallayouts329

5/6

5/22/2016

JsTutorialIsotopeFilter&sortmagicallayouts

FitText - makes font-sizes

flexible

Squishy - automatically
resizes text

FlowType.JS - Responsive
web typography

Apr 04, 2014 1125 views

Apr 04, 2014 869 views

Apr 04, 2014 1758 views

0Comments

Sortby Oldest

Addacomment...

FacebookCommentsPlugin

Get Socials

Newsletters
Subscribe to our newsletters and be informed
of new posts and other Js-tutorial events.

Contact Us
Contact us by email: [email protected]

Enteryouremailaddress

Subscribe

JS Tutorial Copyright 2014, All Rights Reserved

http://jstutorial.com/isotopefiltersortmagicallayouts329

6/6