CODEWITHSUNDEEP
jquerylayout
user2992421
user2992421

Reputation: 11

isotope.js masonry layout peculiarity

I want to have a grid of items, and when you click one a class is appended to change its size. This works fine, except when you click the first item (top left), at which point the layout is, well, rubbish! Here's a jfiddle showing the problem: click any colour to see it working nicely; click the black one to see a very un-masonry layout.

Any ideas?

JAVASCRIPT 

    jQuery(function($){
        var $container = $('#grid');
        $container.isotope({
            itemSelector: '.tile',
            layoutMode: 'masonry'
        });


    $container.delegate('.tile', 'click', function(){
        $this = $(this);
        if( ! $this.hasClass('locked') ) {
            $this.addClass('clicked');
            $('.tile').each(function(){
                if( ! $(this).hasClass('clicked') ) {
                    $(this).removeClass('large');
                }
            });
            $this.removeClass('clicked');
            $this.toggleClass('large');
            $container.isotope('reLayout');
        }
    });
});
</pre>

Upvotes: 1

Views: 587

Answers (2)

user2992421
user2992421

Reputation: 11

Aha, I found a solution here which doesn't employ perfectMasonry but extends isotope...

$.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 ||
    this.$filteredAtoms.outerWidth(true) ||
    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() {
    this.masonry = {};
    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;
    this._getMasonryGutterColumns();
    return (this.masonry.cols !== prevSegments);
};

Upvotes: 0

Ennui
Ennui

Reputation: 10190

Isotope and Masonry both leave gaps in many situations when your isotope items have different sizes. The layout algorithm is just not that robust - even in situations where you COULD have a perfect masonry layout with no gaps, it often will leave gaps anyway.

The reason it only happens on the first (black) element is because isotope automatically uses the dimensions of the first element upon layout / reLayout to do its calculations.

Fortunately there is a great layout plugin for isotope called perfectmasonry which improves this behavior significantly and gets rid of the gaps. Find it on GitHub here.

Assuming your elements are all grid sized (e.g. they are all multiples of n pixels) this should fix your problem.

Upvotes: 1

Related Questions