0

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

我想删除最后一个排水沟列，所以右侧没有间距，所以它齐平 - 但我无法计算出代码。

我在这里设置了一个例子：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
        }
    });
};

任何想法/提示将不胜感激！

4

1 回答 1

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。改用元素大小

于 2015-02-03T17:44:40.773 回答