Is an Isotope layout combining centered fitRows possible?

Question

I am attempting to set up a page on the website that utilizes a centered fitRows Isotope layout.

I can get the centered layout, and I can get the fitRows layout. However, I have not been able to combine them into a centered fitRows layout.

I am assuming there is a conflict between the centered Masonry and fitRows layouts.

Is it possible to combine these 2 types of layouts or am I out of luck? This is the first time that I've used Isotope, so I'm not sure how to do some of the more advanced tricks yet.

I'm using the following to instantiate Isotope

// set up isotope
var $container = $('#candidates');
$container.imagesLoaded(function(){
        $container.isotope({
                itemSelector:   '.candidate',
                layoutMode:     'fitRows',
                masonry:        {
                                    columnWidth:    175,
                                    gutterWidth:    20,
                                    isAnimated:     true,
                                    isFitWidth:     true
                                }
            });
    });

My full test code can be found here: http://jsfiddle.net/hightechredneckwoman/UtHRX/23/

Answer 1

I just made a modified version of fitRows that may be of help:

  // modified Isotope methods for gutters in fitRows
Number.prototype.roundTo = function(num) {
    var resto = this%num;
    if (resto <= (num/2)) { 
        return this-resto;
    } else {
        return this+num-resto;
    }
}

   $.Isotope.prototype._fitRowsLayout = function($elems) {
    var instance = this,
          containerWidth = this.element.width(),
          props = this.fitRows;

    var gutter = this.options.fitRows && this.options.fitRows.gutterWidth || 0;
    var columnWidth = this.options.fitRows && this.options.fitRows.columnWidth ||
                  // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                  // if there's no items, use size of container
                  containerWidth;
console.log("C="+columnWidth);
      $elems.each( function() {
        var $this = $(this),
            atomW = $this.outerWidth(true),
            atomH = $this.outerHeight(true);


    if(props.x !== 0 && props.x + atomW + gutter <= containerWidth){
        props.x = props.x.roundTo(columnWidth + gutter);
    }

        if ( props.x !== 0 && atomW + props.x > containerWidth ) {
          // if this element cannot fit in the current row
          props.x = 0;
          props.y = props.height;
        }

        // position the atom
        instance._pushPosition( $this, props.x, props.y );

        props.height = Math.max( props.y + atomH, props.height );
        props.x += atomW;

    });

};

It's designed to support both gutter and column width but uses the regular fitRows math for the rest of the function.