95

I recently discovered the Masonry and Isotope JQuery plugins. They seem to be functionally almost identical and both appear to have the same author. The only obvious difference I can see is the license.

What are the main differences between these two in terms of functionality? Why would you use one over the other?

Chuck Le Butt
  • 43,669
  • 58
  • 179
  • 268
Dónal
  • 176,670
  • 166
  • 541
  • 787

2 Answers2

136

An excerpt from the interview with the author:

To some people Isotope would look very similar to the work you had previously done with Masonry; can you explain the main differences between the two?

Isotope has several features that Masonry lacks. Masonry essentially does one thing, placing item elements in a cascading arrangement. Isotope has Masonry’s layout logic built in, but in addition, it also has several other layout modes that can be used to dynamically position elements. You can even develop your own custom layout mode.

As I’ve mentioned, it has filtering and sorting functionality built in. Filtering items is as easy as passing in a jQuery selector:

$('#container').isotope({ filter: '.my-selector' });

Isotope takes advantage of the best browser features out there. Instead of using typical left/top styles positioning, Isotope takes a progressive enhancement approach and uses CSS transforms if supported by the browser. This provides for top-notch performance for top-notch browsers. With hardware acceleration kicking in, animations look silky smooth on WebKit browsers, and even less-powerful devices using iOS. CSS transforms perform better with CSS transitions, which I’ll discuss later.

Another difference is license as @AminAriana pointed out. Masonry is under the MIT license, but Isotope is only free for personal use.

You can buy (25$) Isotope commercial license on this page.

PrimosK
  • 13,357
  • 10
  • 57
  • 73
  • 19
    Please copy-paste the relevant text from the web-page into your answer (as a quote). The link may die (temporarily or permanently), which would make your answer useless. – Šime Vidas Jan 13 '12 at 20:57
  • 11
    In addition, as you alluded to in the question, you should pay attention to the Licensing terms. Masonry is under the MIT license, but Isotope is only free for personal use. People reading the answer may overlook this, so I pointed it out explicitly. – Amin Ariana May 06 '12 at 20:41
  • 4
    yet alot of authors in Themeforest use isotope despite the license. – Jürgen Paul Aug 30 '12 at 19:29
  • Reminder: some people view the option to pay as a good thing :) It increases the odds that the project will continue to be updated. – Hugo May 11 '13 at 17:29
2

PrimosK pretty much answared you question, but I just wanted to chime in ...

Isotope is an awesome jQuery plugin. I've successfully used it on multiple sites.

One of the things I like most about Isotope is how customizable it is. It's well documented and it can do almost anything you can think of like extending it with infinite scroll and use custom layout modes.

John Hascall
  • 8,682
  • 4
  • 46
  • 64
Ahrengot
  • 1,506
  • 1
  • 17
  • 28