jQuery同位素/马氏Gutter问题

Question

我正在使用jQuery 同位素。这是一个伟大的插件，但我有一个小问题，对齐项目在砌体模式。我的容器是960px宽，我的目标是让4个项目完美地排列，就像它在使用960px网格系统一样。所以，左边和右边的边缘都会接触到容器的边缘。这是一张屏幕截图，展示了它目前的面貌：

​

​

我的代码现在是这样的：

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/)，我为容器添加了背景颜色，以检查有问题的额外间隙，但没有显示额外的空白。

此外，它不尊重你的960‘t宽度，因为布局是响应的。因此，在我看来，您并没有完全复制实际页面上的代码(html、css、jQuery)。

无论如何，我禁用了响应代码位，以使它遵守固定的960 of宽度，并看到额外的10 of的差距。http://jsfiddle.net/shodaburp/qGJhe/3/

这让我意识到，你对排水沟大小和元素宽度的计算是相当不准确的。

元素宽度为240 at将完全没有排水沟的空间。 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

元件宽度为230 1px加上排水沟大小为13，将使您获得1 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，那么您需要将元素的宽度缩小到225 in，并且有20 in的凹槽大小。

元件宽度为225 be再加上排水沟尺寸为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不是一个标准的选项。从演示页面的源代码中添加代码所需的医生说。

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