javascript - jQuery 同位素/砌体排水沟问题

Question

我正在使用 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，但元素之间没有间隙。

编辑

这是一个展示我所拥有的东西的 fiddle http://jsfiddle.net/qGJhe/

Answer 1

基于您的 jsFiddle ( http://jsfiddle.net/qGJhe/ )，我为容器添加了背景颜色以检查您遇到的额外间隙，但它没有显示额外间隙。

此外，它不支持您的 960 像素宽度，因为布局是响应式的。所以在我看来，您没有复制与实际页面上完全相同的代码(html、css、jQuery)。

无论如何，我禁用了响应代码位以使其符合固定的 960 像素宽度，并看到了 10 像素的额外间隙。 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