0 Comments

You know Pinterest? And would like a layout like Pinterest? Well I did and came across this jQuery Masonry plugin.

But I wanted to do some sorting and filtering with the elements. The Masonry which is released with an MIT license does not have this functionality. Isotope does, but has a $ 25,- license for commercial use and is free for personal use.

This quote from StackOverflow explains the difference between masonry and isotope:

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.

 

You can use isotope to make something look like a masonry layout.

$('#container').isotope({
  masonry: {
    columnWidth: 110,
    gutterWidth: 10
  }
});

But Somehow the gutters don’t show up. So you need a custom layoutmode for Isotope. I have found it in the sourcecode of the example: http://isotope.metafizzy.co/custom-layout-modes/masonry-gutters.html

Here is the javascript code:

// modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function () {
    var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
    containerWidth = this.element.width();

    this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
        // or use the size of the first item
        this.$filteredAtoms.outerWidth(true) || 
        // if there's no items, use size of container
        containerWidth;

    this.masonry.columnWidth += gutter;

    this.masonry.cols = Math.floor((containerWidth + gutter) / this.masonry.columnWidth);
    this.masonry.cols = Math.max(this.masonry.cols, 1);
};

$.Isotope.prototype._masonryReset = function () {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn't have to call this again
    this._getMasonryGutterColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
        this.masonry.colYs.push(0);
    }
};

$.Isotope.prototype._masonryResizeChanged = function () {
    var prevSegments = this.masonry.cols;
    // update cols/rows
    this._getMasonryGutterColumns();
    // return if updated cols/rows is not equal to previous
    return (this.masonry.cols !== prevSegments);
};

$(window).load(function(){
    $('#container').isotope({
        masonry : {
            columnWidth: 110,
            gutterWidth: 10
        },
        itemSelector: '.item',
        animationEngine: 'best-available',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
});

Good luck with the jQuery Isotope plugin!

kick it on DotNetKicks.com Shout it

Pin on pinterest Plus on Googleplus Post on LinkedIn