1

我正在使用 jQuery Isotope。这是一个很棒的插件，但我在以砌体模式对齐项目时遇到了一点问题。我的容器是 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/

4

2 回答 2

3

根据您的 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 个元素很好地适应 960 像素，那么你需要将元素的宽度减小到 225 像素，并且间距大小为 20 像素。

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

于 2013-03-18T07:54:45.377 回答
3

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

使用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 );
};
于 2013-03-13T21:53:38.693 回答