metafizzy/isotope

:revolving_hearts: Filter & sort magical layouts

Isotope

Filter & sort magical layouts

See isotope.metafizzy.co for complete docs and demos.

Install

Download

• isotope.pkgd.js un-minified, or
• isotope.pkgd.min.js minified

CDN

Link directly to Isotope files on unpkg.

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

Package managers

npm: npm install isotope-layout --save

Bower: bower install isotope-layout --save

License

Commercial license

If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase an Isotope Commercial License at isotope.metafizzy.co

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Isotope under the terms of the GPLv3.

Read more about Isotope's license.

Initialize

With jQuery

$('.grid').isotope({
  // options...
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 200
  }
});

With vanilla JavaScript

// vanilla JS
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
  // options...
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 200
  }
});

With HTML

Add a data-isotope attribute to your element. Options can be set in JSON in the value.

<div class="grid"
  data-isotope='{ "itemSelector": ".grid-item", "masonry": { "columnWidth": 200 } }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

---

By Metafizzy 🌈🐻, 2010–2020

isotope's Issues

Can't disable/re-enable animation

I want to be able to on page load insert all items without animation. Then any subsequent additions, i want to animate them in. This does not seem possible at the moment. The issue is that animating in many objects on page load is very slow in Internet Explorer. I'd like to insert the first batch without animation.

Isotope's CSS hooks overwrite previous transform styles

From Pull Request 21 by kirbysayshi:

isotope overwrote my manual setting of -moz-transform: rotate(10deg) ...

It might be nice to separate these hooks from isotope. Adding them to the global jQuery object without telling people is slightly dangerous. One solution is to use jQuery.sub() internally.

So this issue has two parts:

1. Add mention of this problem to the Troubleshooting section of the docs
2. Find a way to resolve this issue, so that users can use other transforms (rotate, skew) and Isotope won't step all over them.

YouTube embeds and css-transforms

Hi,

Using css-transform: translate renders YouTube videos black/blank in all but beta/dev Chrome 11, as far as I can tell: http://jsfiddle.net/oskarrough/4vRzd/4/

Is there any way of hacking through this in order to keep the positioning and the video?

Interactive button toggles the filter

Instead of having to click a separate interactive button labeled "show all", it would be nice to be able to use a single interactive button to toggle the filter on/off. I'm not sure what the best way to go about doing this now would be?

Calculate column widths on resize.

I'd love to be able to pass or recalculate column widths when a resize is triggered specifically with the masonry layout. It would be handy for doing smart columns that shink/grow a little to fill the container on resize.

Horizontal layouts without container height

Is there built-in way to use horizontal layouts without setting container height?

If columnWidth is specified then number of columns can be calculated with which items can evenly fill each column. When an item changes height, it should expand in-place, pushing items below it down, without redistributing items across columns.

I tried masonry layout but when an item changes height, items got redistributed across columns confusingly.

More intelligent sorting

Sorting algorithm is limited to one set of data.

In the Elements Complete demo, Sort by number then by category. Within each category, the items elements should be sorted by number. Ideally you should be able to rely on the previous sort order to 'carry over' on the next sort.

Resizable is not overideable on future re layouts

Resizable is only read once when the initial window resize event is binded. I would like to send {resizable:false} to isotope at a later time to temporarily disable the resize event and then send {resizable:true} to isotope to re-enable the resize.

Inconsistent sorting behaviour

On the elements complete demo, rapidly click Number (asc) and then Weight (asc) and repeat. If this is done rapidly enough, the eventual sort order will fluctuate. Most of the time K and Ar will exchange places like you would expect, but after enough rapid clicking, Ni and Co will move as well.

This may or may not be related to https://github.com/desandro/isotope/issues#issue/1

Wrap everything in global closure

Per pomeh:

Why don't you use a global closure for all your code ? This getStyleProperty function goes to the global scope and it's not really a good thing. I assume you don't use it anywhere but in the current file. Tell me if I'm wrong :)

Saving states with hash tags

It'd be nice for Isotope to change hash tags so that users can save their state in a URL. Similiar to jQuery BBQ

Expose position (especially for ordered lists)

I modified some of the layouts to store the position of the item so that I could fake renumbering ordered lists that were sorted. Would be nice to have this included.

Here's an example:

_straightDownLayout : function( $elems ) { var instance = this; $elems.each( function( i ){ var $this = $(this), y = instance.straightDown.y + instance.posTop; instance._pushPosition( $this, instance.posLeft, y ); instance.straightDown.y += $this.outerHeight(true); $this.data('position', i); // used to renumber ordered lists }); return this; },

Positioning in Firefox 4 with Isotope

I am noting an issue with using Isotope with Qtip 2 as well as with Yoxview. As an issue previously reported with Qtip 2, tooltips show up always in the upper left (it seems over the first .item). I am also seeing this when opening a lightbox with Yoxview, it originates from the upper left rather than from the thumbnail actually clicked, as it should. I fixed the tooltip issue in my case by positioning the modal tip "my: center, at: center". You can see the Yoxview issue here:
http://jalbumskins.com/lightbox/

Document option method

Similiar to jQuery UI, the option method allows you to get and set options. This method should be added to the methods page

Isotope mini Modernizr overwrites previous Modernizr

Per pomeh:

This will not work if you use another version of Modernizr, before this line, which test other things. I don't have a fix for this, unless to write it in your documentation. Too bad :(

Transitions / Animations require CSS property to work in Webkit

When filtering / sorting, the transitions are not working in Chrome or Safari unless the following CSS is included somewhere:

.isotope-item { -webkit-transition-duration:0.8s;}

Thought this might save someone some troubleshooting time.

CSS transforms break Flash content

See http://dropshado.ws/post/4085720152/css-transforms-breaking-flash

To do: build an option that disables CSS transforms, so the layout logic will use top/left absolute position, like the original Masonry.

Document custom layout modes

If you dig through the source, you'll find hooks that that each of the layout modes utilize. These methods are (with foo being the name of the layout mode):

• _fooReset
• _fooLayout
• _fooGetContainerSize
• _fooResize

Documentation for developing your own custom layout mode should be added.

There are also several helper methods that should be discussed:

• _getSegments
• _pushPosition

Callbacks don't work

Looks like jQuery UI widget bridge doesn't have internal support for passing in a callback in the plugin's arguments.

Docs either need to be revised, or callbacks should be supported.

Remove isoTransform from jQuery object

Per pomeh

Does this function really need to be in the jQuery object ?

how an element can be visible in all filters

is there any way that an element in the container to be visible no matter which filter is active without using all the filter keywords?

SortBy Multiple Data Sets

It would be great to be able to sort data by multiple sets of data, for example:

$('#container').isotope({ 
  sortBy : { {'rating', 'ASC'}, {'time', 'DESC'} },
  //Sets default sort direction if nothing is set specifically
  sortAscending : false
});

As for a live example, the page here shows the scenario. Data is sorted by rating and then by time. When a user is logged in and an item is added, it should go after rated items, but earliest in the time sorting.

Filtered items not scrolling with other content Safari 5 PC

animationEngine option not updated after initialization

Setting the animationEngine option after the initialization does not update any of the corresponding logic.

See also this comment from @sroucheray

Please reply if you'd like to see this issue resolved.

[bug] items with percentage-height not laid-out properly until after resizes

When an item's height (and perhaps width) is set as a percentage of the relevant container, the initial isotope-layout doesn't seem to take into account its actual display height. Interestingly, isotope eventually catches up after forcing several window resizes.

See for example:

http://jsfiddle.net/bqK23/1/

(This is derived from the 'highlighting first item' blog example with just 3 changes: (1) layoutMode is straightDown; (2) new .proportionate class sets a 20% height; (3) the second element listed is given the proportionate class.)

Not that the initial layout has items overlapping as if the second item has little if any of its true height. But, if you resize the window, the layout almost fixes... and another resize or two causes it to catch up completely. (This is the case even if the resize is horizontal, and doesn't affect the actual 20% height.)

How do I center masonry sorted columns?

I am playing around with the masonry layout on my personal website http://www.vinzenzweber.com/dev and would simply like to align the columns in the center of the page. Is this some simple CSS issue I can't figure out or do I really have to do some javascript work to get that done?

Thanks for your help!

Allow for prepending with animation

It seems that you can only append content and have it animate into the layout. Can we have an option to prepend so items come in animated from the top?

hide elements with filter on load

hello, i am using this

$container.isotope({
itemSelector: '.element',
masonry : {
columnWidth : 260
},
filter: '.menu, .about'
});


layout height

hello, I am facesing a very odd problem with isotope and the mansonry layout, as you can see in this link: http://jsfiddle.net/dimios/28TCQ/1/

I used to use mansonry script where everhing was simple, there was no need to set the height of the elements inside the container, only the width. With isotope when I have the same width and height for all the elements everything works fine. But now I want the elements to share only the same width and the height to be free and maybe uniq for every element. I can find what I am doing so wrong and I have these problem, as you can see the the thrid elements is inside the second element, in this case not even the filter work for some elements.

Please any help to understand from anyone will be rellly apriciated.
cheers

Multiple filters doesn't work well

When I have different filters applied to isotope it seems to loose one of the earlier filters. For example, if I have one filter on 'countries' with values india, china and another filter on category with values 'men', 'women' and 'children'. If I have india filter on and go on to apply different values for category, I get to see values from both india and china. It doesn't restrict the values to india.

Guidelines for submitting issues

Please read my Issues Agreement

Also look over helpful links in additional resources.

---

The following issues feature folks who didn't read the issues agreement.

IE8 hidden opacity not being applied

When filtering, sometimes IE8 does not apply zero opacity to certain content within item elements, typically Flash embeds or components like Cyclers that have their own opacity applied.

• Test case needs to be generated to isolate the problem

isotopeReLayout event

To make things like timed callbacks easier, an event would be great. Then clients can bind their callbacks to the Isotope event event as opposed to smartresize

$('#container').bind('isotopeReLayout', function(){
  // hot shiz here...
});

is there anyway to filter using search ?

Is there anyway that I can use search to submit key-words to filter results?
thanks in advance

A way to read the new sort order

Currently, as far as I've been able to figure out, there is no good way to do the above. Another value next to the original-order in isotope-sort-data would be convenient, or even a way to loop through the nodes in order.

Odd gaps in layout

I'm seeing some odd gaps in a tiled layout using the masonry layoutMode. I'm not sure if this is a bug (my guess is that it's not, in which case this is more of a feature request), but it does look very strange.

What I've got is a fixed number of columns. When you click on one tile, it expands to the width of 4 tiles and height of 2. When you click on tiles in particular columns, there isn't enough room in the row to accommodate the expanded tile. So it's deposited in the next row with the result that there are 1 or more empty spots in the previous row.

At http://jsfiddle.net/fwonkas/Ag5XX/7/ , click on letters like C, D, H, I, M, N, etc. to see the gaps.

If this is intended behavior, is there a layout mode that will take both vertical and horizontal gaps in mind when flowing the layout?

Appending items - how to fade in from bottom?

Request from Chris Armstrong

when adding items to isotope, is it possible to have them fade in and come from the bottom (instead of the top left)?

[bug] 'destroy' method doesn't exactly restore pre-init-state: leaves 'height:auto; width:auto' in element.style

After calling the isotope 'destroy' method, the container is not restored to its prior state/styling; in particular it get 'height:auto; width:auto' in its element.style, which may clobber other desired CSS.

Example: http://jsfiddle.net/bqK23/8/

On initial run, isotope hasn't been applied; the container has the desired size. Applying isotope by clicking the 'isotope-init' link leaves the container the desired size (and adds overflow-hidden, which is fine). But then clicking the 'destroy' link to remove isotope leaves the container differently-sized, automatically based on its contents, clobbering the desired specified sizing.

Centering the items within the container div

Hi,

I was wondering if it is possible to center all the items within the container, instead of them being left aligned.
If it is - i would buy a support license for your help. I'm afraid that maybe it is not.

Here is my fiddle: http://jsfiddle.net/yv7m3/

You made a fiddle to center the container, but not the item elements inside: http://jsfiddle.net/desandro/P6JGY/6/

You also suggested a great site, but i'm not sure how to pick up what they have done: "ish.tv is also a great example of how to center masonry layouts."

Thanks for your time.

Need callback after animation

Currently, the callback is executed after the script runs, but before transitions or animations have been completed. Ideally, the callback would be triggered after the transition and the animation have completed.

Right to left layout

For right-to-left languages like Hebrew, Arabic. Currently Isotope only supports left-to-right layouts.

Re-sorting items with identical data rearranges their order

In the Elements Complete demo, click on the Sort > category (asc), and then click it again. Isotope erroneously re-orders the item elements, even though their data matches and nothing has really changed.

Update sorting data after init

Currently, there's no method update the sorting data on an item element after the plugin is initialized.

Let's say that a parameter is updated via AJAX or jQuery, there needs to be a way to make that change in the sorting data so that Isotope can sort with the new data.

[feature request] make 'remove'd items de-isotope-styled, for easier reuse elsewhere

After removing items from a container/DOM with the isotope 'remove' method, they still have isotope-styling, such as class 'isotope-item' and element.style absolute-positioning. This makes it a tad harder to reinsert them elsewhere. Easy enough to clean up manually, but it'd be nice if 'remove' either undid all isotope-styling, or if an item-specific analogue of 'destroy' was available.

CSS-Transforms and viewport scrolling in Safari causes distorted elements

First of all – I'm pretty sure this is not an isotope bug, but a Safari issue.
I'm interested if anyone can reproduce this and if this is a known issue (I googled a lot, actually – but came up with nothing); I figured posting it here is better than not posting it at all.

Over the weekend I finally had some time to fiddle around with isotope and ran into some strange Safari-issue where once the isotope-items have been "relayouted", scrolling the viewport causes weird distortions of the elements.

To reproduce:

• open http://isotope.metafizzy.co/
• let the page load completely, then narrow down the browser window so that the isotope-items get rearranged (making the browser window wider does not cause the following behaviour)
• scroll and you'll see the distorsion happening – the faster you scroll, the more the items on the page will get "stretched"
• the elements visual position will also shift (even push them out of the viewport), but a mouseover will still trigger at the correct position of the element
• this seems to affect all elements in the document and is not limited to isotope-items
• triggering a relayout (resizing the browser window) will fix the positioning and dimensions of the items
• screenshot: http://tinypic.com/view.php?pic=339ue68&s=7

Edit: just did another test and found out that

• when trying to reproduce above behavior on http://isotope.metafizzy.co/demos/elements-complete.html one does not need to resize the browser window
• as far as I can see, only scrolling up causes the distortion
• arrow-up or page-up also trigger described behavior
• i cannot reproduce the distortion of non-isotope items on the two posted pages, in my local project it affects an element with position: fixed applied
• another screenshot: http://tinypic.com/view.php?pic=29oh06p&s=7

This all happens for Safari 5.0.5 (5533.21.1), Mac OS X 10.5.8 – but not in Chrome or Firefox 4 (and of course not in IE).

Setting transformsEnabled to false (as described here: http://isotope.metafizzy.co/docs/options.html#transformsenabled) fixes the problem in my local project.

Flexible layout + images + filtering = issues.

You can see what's going on at these two pages:
http://www.marktauriello.com/portfolio
http://www.marktauriello.com/winter2084

(BTW, I'll totally purchase a license for this, I just want to make sure that I can actually use the plugin to get the desired results first.)

So, I borrowed the script from the flexible layout example you posted a while back, and have been trying all types of configurations to get it to work with both filtering and the imagesLoaded plugin.

Right now I've left everything at it's most functional state.

A rundown of the problems I've encountered:

1. Masonry doesn't seem to run once the page loads, but will run after a filtering click. (The code's different on the Winter2084 page, so it does run.)
2. Clicking a filtering button twice borks the layout with extra vertical spacing.
3. Resizing after filtering causes overlapping images.

Am I overdoing it with what I'm trying to get Isotope to do?

No easy way to prepend items

There's no easy way to prepend items to the beginning of the collection

$('#container')
  .prepend( $newItems )
  .isotope( 'addItems', $newItems )
  .isotope( 'reLayout');

will only add them to the end.

Combining IsoTope with QTip plug-in leads to render problem of the QTip Popup in Firefox.

Hi,

In this sample with FF 4.0 : http://www.team-w.ch/de/teamw_team3.php after one filtering operation, the QTip popup renders always at the same position.
Another Site found in your "using:isotope Bookmarks" : http://www.presencemultimedia.co.uk/work/ seems to have the same issue with the shadowbox plug-in.

Thanks for your help

exception in sorting

Is there any way to create an exception for an element in sorting? Lets say I sort elements based on number but I want always the first element to stay first when sorting asc or desc.
if i will not use any class="number" only for this element when the rest have, for some reason all the sorting goes crazy.
Thanks

Using imagesLoaded with insert method

I'm working with an ajax call for new elements with images inside, I'm calling 'remove' and then 'insert' with callback 'reLayout'. The problem is that 'reLayout' is called before the images are loaded so it doesn't respect their sizes.

Where would you add the imagesLoaded hook for this to properly work?

Thanks!