砌体网格的同位素配置

Question

我正在尝试使用带有Isotope的砌体网格来实现以下布局。

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

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

模式很明显，我似乎在某些地方偏离200px，而在其他地方则差不多。但是当我将jQuery init代码和/或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>

更正布局代码（在检查器中弄乱后）

<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相等。在您的情况下，从带有占位符的图像中，最小的是200px宽度。 http://jsfiddle.net/QsCZx/452/

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