Question

我有一个流体响应同位素，砌体网格（也使用图像加载 - 但在本例中没有），带有断点。

我想删除最后一个gutter列，因此右侧没有间距，因此它处于齐平状态 - 但我无法计算出代码。

我在这里设置了一个例子： http://codepen.io/mattpark22/pen/yyzKgo

主要功能是：

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
        }
    });
};

非常感谢任何想法/提示！

Answer 1

使用Isotope v2，砌体gutterWidth选项已更改为gutter。

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

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

此外，columnWidth函数不再适用于Isotope v2。请改用element sizing

从最后一栏拆除砖石上的排水沟

1 个答案: