砌体网格的同位素配置

Question

我正在尝试使用带同位素的砌体网格实现以下布局。

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

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

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

我需要更改哪些值以及我需要添加或删除哪些 parameters/attributes/selectors 以便 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

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

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

Answer 2

删除 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 中，因为外部 link 不工作。

砌体网格的同位素配置

Isotope configuration for masonry grid

jquery

html

css

jquery-isotope