Question

我正在使用jQuery Isotope。这是一个很棒的插件，但我在砌砖模式中对齐项目时遇到了一些问题。我的容器宽960px，我的目标是让4个项目完美排列，就像使用960px网格系统一样。因此，左右边缘都将接触容器的边缘。这是一个屏幕截图，展示了当下的情况：

enter image description here

我的代码目前是这样的：

JS：

$('#container').isotope({
  itemSelector : '.item',
      masonry : {
          columnWidth : 240,
          gutterWidth: 10
      }
});

CSS：

.item{
width:230px;
background:red;
overflow: hidden;
}

HTML：

 <div class="item">a</div>

到目前为止，我设法让它工作的唯一方法是将宽度设置为240px，但项目之间没有间隙。

修改

这是一个小提示，显示我有http://jsfiddle.net/qGJhe/

Answer 1

根据你的jsFiddle（http://jsfiddle.net/qGJhe/），我为容器添加了背景颜色，以检查你遇到的额外差距，但它没有显示出额外的差距。

此外，它不符合您的960px宽度，因为布局是响应式的。因此，在我看来，您并没有复制与实际页面完全相同的代码（html，css，jQuery）。

无论如何，我禁用了响应代码位，以使其符合固定的960px宽度，并看到10px的额外间隙。 http://jsfiddle.net/shodaburp/qGJhe/3/

这让我意识到你对沟槽尺寸以及元素宽度的计算是相当不准确的。

240px的元素宽度根本不会为装订线提供空间。 http://jsfiddle.net/shodaburp/qGJhe/4/

gutterSize = (containerWidth - (elementWidth * numberOfElement) / numberOfGutters)

<强> gutterSize = (960 - (240 * 4) ) / 3) = 0

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (240 * 4) + (3 * 0) = 960

extraGap = containerWidth - totalWidth

<强> extraGap = 960 - 960 = 0

元素宽度为230px加上天沟大小为13将为您提供1px的额外差距 http://jsfiddle.net/shodaburp/qGJhe/5/

gutterSize = (containerWidth - (elementWidth * numberOfElement) / numberOfGutters)

<强> gutterSize = (960 - (230 * 4) ) / 3) = 13.33 = 13 (rounded)

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (230 * 4) + (3 * 13) = 959

extraGap = containerWidth - totalWidth

<强> extraGap = 960 - 959 = 1

如果你想在一行中有4个元素很好地适应960px，那么你需要将元素的宽度减少到225px，并使天沟大小为20px。

225px的元素宽度加上20的装订线尺寸将是完美的！ http://jsfiddle.net/shodaburp/qGJhe/6/

gutterSize = (containerWidth - (elementWidth * numberOfElement) / numberOfGutters)

<强> gutterSize = (960 - (225 * 4) ) / 3) = 20

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (225 * 4) + (3 * 20) = 960

extraGap = containerWidth - totalWidth

<强> extraGap = 960 - 960 = 0

Answer 2

您是否添加了修改后的布局模式？

使用gutterWidth不是标准选项。您需要从演示页面的源代码添加代码的docs say。

http://isotope.metafizzy.co/custom-layout-modes/masonry-gutters.html

// modified Isotope methods for gutters in masonry
$.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 ||
                // or use the size of the first item
                this.$filteredAtoms.outerWidth(true) ||
                // if there's no items, use size of container
                containerWidth;

  this.masonry.columnWidth += gutter;

  this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
  this.masonry.cols = Math.max( this.masonry.cols, 1 );
};

jQuery Isotope / Masonary Gutter问题

2 个答案: