砌体网格的同位素配置

Question

​我正在尝试使用带有同位素的砖石网格来实现以下布局。

但是，在我当前的设置下生成的代码有一些 200 像素的偏移量，我似乎无法协调。这将导致以下布局。红色箭头表示我需要如何移动这些部件以使其看起来像上面的模型。

以下是两组代码。第一组是生成错误布局的代码。第二组是在 Chrome Inspector 中操作样式属性的高度、左侧和顶部选择器以设置正确的顶部和左侧像素值的结果。这至少模拟了我想要 Isotope 做的事情。

模式很明显，我在某些地方似乎偏离了 200 像素，而在其他地方或多或少。但是，当我将 jQuery 初始化代码和/或 CSS 更改为这种效果时，以各种组合方式，我没有得到我需要的结果。我的大脑显然不够大，无法找出正确的组合。

我需要更改哪些值以及需要添加或删除哪些参数/属性/选择器，Isotope 才能自动生成正确的砌体布局？

布局代码不正确

<div class="grid" style="position: relative; height: 600px;">
    <div class="grid-item grid-item--width2 grid-item--height2 wow zoomIn" style="position: absolute; left: 0px; top: 0px; visibility: visible;"><img src="img/placeholder400x400.png"></div>
    <div class="grid-item wow zoomIn" style="position: absolute; left: 600px; top: 0px; visibility: visible;"><img src="img/placeholder200x200.png"></div>
    <div class="grid-item wow zoomIn" style="position: absolute; left: 600px; top: 200px; visibility: visible;"><img src="img/placeholder800x200.png"></div>
    <div class="grid-item wow zoomIn" style="position: absolute; left: 0px; top: 400px; visibility: visible;"><img src="img/placeholder800x200.png"></div>
    <div class="grid-item wow zoomIn" style="position: absolute; left: 600px; top: 400px; visibility: visible;"><img src="img/placeholder200x200.png"></div>
​</div>

正确的布局代码（在 Inspector 中弄乱之后）

<div class="grid" style="position: relative;height: 400px;">
    <div class="grid-item grid-item--width2 grid-item--height2 wow zoomIn" style="position: absolute; left: 0px; top: 0px; visibility: visible;"><img src="img/placeholder400x400.png"></div>
    <div class="grid-item wow zoomIn" style="position: absolute;left: 400px; top: 0px; visibility: visible;"><img src="img/placeholder200x200.png"></div>
    <div class="grid-item wow zoomIn" style="position: absolute;left: 600px; t;top: 0;visibility: visible;"><img src="img/placeholder800x200.png"></div>
    <div class="grid-item wow zoomIn" style="position: absolute;left: 400px;top: 200px; visibility: visible;"><img src="img/placeholder800x200.png"></div>
    <div class="grid-item wow zoomIn" style="position: absolute;left: 1200px;top: 200px; visibility: visible;"><img src="img/placeholder200x200.png"></div>             
​</div>

这里是 CSS 和 jQuery。

CSS

/* ---- grid ---- */
.grid {
  max-width: 1400px;
  position: relative;
}
/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
  float: left;
  width: 200px;
  height: 200px;
}
.grid-item--width2 { width: 400px; }
.grid-item--height2 { height: 400px; }

jQuery

$('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 600
  }
});

我确实尝试了设置columnWidth: 400​的显而易见的事情，但这只是让我得到以下布局。

关闭，但顶部占位符仍相差 200，底部占位符仍相差 400。

这种特殊的布局甚至可以使用同位素来实现吗？

Answer 1

删除masonry: { columnWidth: 600 } 并改用layoutMode: 'packery'。将您的.grid-item 宽度设置为自动，它应该可以正常工作。

JavaScript

$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'packery'
});

CSS

.grid-item {
  float: left;
  width: auto;
  height: 200px;
}

Working Codepen

（或者如果你愿意）

Working Fiddle

*注意 要使用 packery，您必须包含 packery JavaScript。我将它包含在笔本身的 JavaScript 中，因为外部链接不起作用。

Answer 2

您需要将columnWidth 设置为与最小的.grid-item 相等。在您的情况下，从带有占位符的图像中，您的最小宽度为 200 像素。 http://jsfiddle.net/QsCZx/452/

$('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 200 //smallest .grid-item
  }
});