Search code examples
jqueryjquery-isotopejquery-masonryfluid-layoutgutter

Remove gutter on masonry from last column


I've got a fluid responsive isotope, masonry grid (also using images loaded - but not in this example), with breakpoints.

I want to remove the last gutter column, so there's no spacing on the right hand side, so it sits flush - but I can't work out the code.

I've setup an example here: http://codepen.io/mattpark22/pen/yyzKgo

The main functions are:

colWidth = function () {
    $w = $container.width(), 
        columnNum = 1,
        columnWidth = 0;
    if ($w > 1400) {
        columnNum  = 7;
    } else if ($w > 1200) {
        columnNum  = 6;
    } else if ($w > 1000) {
        columnNum  = 5;
    } else if ($w > 800) {
        columnNum  = 4;
    } else if ($w > 600) {
        columnNum  = 3;
    } else if ($w > 300) {
        columnNum  = 2;
    }
    columnWidth = Math.floor($w/columnNum);
    $container.find('.isotope-item').each(function() {
        var $item = $(this),
            multiplier_w = $item.attr('class').match(/isotope-item-w(\d)/),
            multiplier_h = $item.attr('class').match(/isotope-item-h(\d)/),
            width = multiplier_w ? columnWidth*multiplier_w[1]-5 : columnWidth-5,
            height = multiplier_h ? columnWidth*multiplier_h[1]*0.45-5 : columnWidth*0.45-5;
        $item.css({
            width: width,
            height: height
        });
    });
    return columnWidth;
};
isotope = function () {
    $container.isotope({
        resizable: false,
        itemSelector: '.isotope-item',
        filter: hashFilter,
        masonry: {
            columnWidth: colWidth(),
            gutterWidth: 5
        }
    });
};

Any ideas/tips would be greatly appreciated!


Solution

  • With Isotope v2, the masonry gutterWidth option was changed to gutter.

    http://codepen.io/desandro/pen/QwqmRO

    $container.isotope({
      isResizeBound: false,
      itemSelector: '.isotope-item',
      filter: hashFilter,
      masonry: {
        columnWidth: colWidth(),
        gutter: 5
      }
    });
    

    Also, the columnWidth function no longer works with Isotope v2. Use element sizing instead