If you've ever took a peak into Isotope's source, you might have come across the tests. These are mostly pages where I double-check that features work appropriately, or verify that bugs occur with certain content. More recently, I've been building out modified layout modes that incorporate some of the newer features of Masonry v2. While these features are not exactly guaranteed to work flawlessly together with one another, they do provide some missing functionality.

• Masonry centered for Isotope
• Masonry with gutters for Isotope
• Masonry corner stamp for Isotope

To use these mods, you'll need to copy the revised $.Isotope.prototype methods than can be found in the page source.

I just pushed up a bunch of commits earlier this week for Isotope v1.4. Features include a refined animation when inserting or appending new items and official support for shuffling order. If you're too lazy to try out inserting in the Adding items demo and shuffling in the Elements partial demo, here's a quick video that exhibits both new features.

I spend a lot of time navigating through the docs, checking features and finding links for support requests. So if I'm having trouble with my own docs, I imagine new users can't be fairing any better.

Navigation

The first thing you'll notice is a re-done homepage. While the original version did a good job of exhibiting Isotope's features, I found it tough to navigate to the next page. This new version has navigation and demo clearly separated.

The sidebar navigation is now ever-present around the micro site, so you can easily browse from demo to demo.

Hash history

Now that the push on internal development has cooled off, I took care of a lingering feature request. With Ben Alman's superb jQuery BBQ, you can enable hash history with your Isotope implementation. Mr. Alman is the the jQuery plugin champion. I have considerable respect for his work, as its well documented and thoroughly tested. Bringing our work together is fantastic as his plugins are designed for interoperability. jQuery BBQ takes care of all the hassle of compressing a big ugly object into hash

Hash history is a great feature that allows your users to save the state of the page, so the URL can be bookmarked and shared. You can save all your options: filters, sorts, layout modes, etc. On top of that, you can hit the back button to return to the previous state. Pretty awes.

If you have ever used Isotope or Masonry, hit a brick wall, like "this shit ain't never gonna work," but you were so deep in the trenches that you'd rather die with your eyelids open staring at code than to admit defeat, so you dug deep and started trying every ugly hack that would yield just the slightest ounce of progress, which eventually laid the groundwork for your break-through and eventual successful implementation...

I would like to express my deepest gratitude.

There are a lot of people out there that experience problems using my work. Or at least, report the problems. But I also imagine that this is but a small fraction of the user base. I'd like to think that the vast majority of users are folks like myself, who are hard-headed and proud and determined to fix the problem themselves. Your persistence is sincerely appreciated. It has saved me hundred of hours in resolving others' implementation issues. This time enables me to further develop the resources, making them faster and more reliable, and better documented.

Thank you.

I've just released the docs for Extending Isotope. This topic is one of the kewlest features of Isotope. The core structure of the plugin uses a constructor pattern, similar to how jQuery UI widgets are developed (see Eric Hynds' example in Using $.widget.bridge Outside of the Widget Factory). Modularity is the principal benefit from this approach. All the functionality within the plugin is derived from the methods of the constructor. Isotope's constructor is $.Isotope. If you wish to extend Isotope, you need only to add another method to $.Isotope.prototype.

As for the layout modes, each one is comprised of four methods that perform the same roles for their mode, Reset, Layout, GetContainerSize, and ResizeChanged. They work together by following the same naming convention, for example, the methods for the masonry layout mode are:

_masonryReset : function() { ... },
_masonryLayout : function( $elems ) { ... },
_masonryGetContainerSize : function() { ... },
_masonryResizeChanged : function() { ... }

This means you can build your own custom layout mode just by adding these methods. There's no need to fork the project or fiddle with jquery.isotope.js. All of your custom code can live outside of the core Isotope script where you can do as you wish. The layout logic is separate from the other logic like filtering, sorting, inserting, so you can reliably use all of Isotope's features cohesively with your own custom additions.

Take a look at the custom layout mode example, categoryRows. This example is pretty cool because it breaks the mold and relies on sorting for its layout logic.

Cut that code

Now that I've opened the kimono, you might consider working the other way and trimming off the fat (mixing metaphors, sorry). For example, if you only use the masonry layout mode, you are free to remove the methods for all the other layout modes. This can cut down file size by a quarter.

If you do end up extending Isotope, please get in touch. I'd love to see your work!

I'm happy to announce that jQuery Masonry, everyone's favorite dynamic layout resource, has received a full v2.0 revision and is ready for public consumption.

What's new

• The architecture of the plugin is built around a constructor pattern, similar to jQuery UI's widgets. This provides for plugin-specific methods and maintaining state of the plugin instance.
• isFitWidth option to enable centered layout
• isRTL option for right-to-left layouts for Arabic and Hebrew
• Better performance. My own basic tests yielded performance boosts of 30-40%
• Sexy animation appending content with the isAnimatedFromBottom flag in appended method, as seen in the Infinite Scroll demo
• Easy prepending with reload method
• Includes imagesLoaded plugin to easily deal with images. No more relying on $(window).load()
• gutterWidth option
• Downloadable docs and demos

Updating from v1

Masonry v2.0 adds new features, performs better and resolves several lingering issues with v1.0. Everyone is recommended to update.

Updating from v1 is fairly easy. The general functionality and basic options of the plugin remains the same.

$('#container').masonry({
  itemSelector: '.item',
  columnWidth: 240
});

Here are the changes you need to be aware of when updating:

• animated option has been renamed as isAnimated
• resizable option has been renamed as isResizable
• appendedContent option has been replace by the appended method
• savedOptions and singleMode options have been removed
• Filtering with Masonry is now unsupported. Use Isotope instead, which handles filtering significantly better.
• Do NOT use $(window).load() to resolve loading media like images. See Help: Unloaded media and overlapping

Development

When I was developing the first version of Masonry in 2009 and 2010, I was learning jQuery at the same time. Consequently, the code was cobbled together with logic that worked okay, but was ultimately not flexible or interoperable. v2 was an opportunity to start fresh and build a plugin that was maintainable and extendable.

Masonry v2.0 is a complete from-the-bottom-up revision of the script and docs. The development effort was started back in October 2010, when I had discovered the revised jQuery Plugins Authoring tutorial by Ralph Holzmann. The tutorial revealed how to build methods into the plugin and maintain state. As I hacked away on the script, it became clear that I would be able to develop another similar plugin that had even bigger functionality. That plugin became Isotope. For the past seven months, my plugin development bandwidth has been devoted on Isotope, thus leaving Masonry dormant.

A couple weeks ago, I felt that Isotope was in a good place and so it was time to give Masonry the proper revision it deserved. With all the development put into Isotope, I took Isotope as a template and worked backwards, reducing it to leave Masonry's core functionality.

In addition to revising the script, I upgraded the documentation to use Jekyll so they could be easily hosted on GitHub Pages. This makes my life a lot easier as I can leverage templating for building the markup. As it's integrated into GitHub, I now only have to update one code base instead of three.

Masonry has always been my most prolific resource and so it holds a sweet spot in my developer's heart. It didn't feel right leaving my baby inactive for so long (in Internet time). I'm pretty happy being able to release v2.0. I can rest assure that are getting a rock-solid resource and I'll be better able to improve upon it moving forward.