Javascript 同位素与DOM序

在这个CodePen（）中，我建立了一个同位素网格，可以是正方形、风景画或肖像画，其中风景画的宽度是正方形的2倍，肖像画的高度是正方形的2倍（代码笔中的HTML、CSS和JS示例位于本文底部。）

不管视口的宽度如何，我看到上面有一个空白区域，我以为正方形会向右移动。请参见此屏幕截图：

这让我震惊，因为同位素受到DOM顺序的限制……这很可能是真的，但我认为同位素的砌体布局会忽略这些东西，并填满所有可用的空间。我错了吗

---

.grid_uuu项--正方形，
.grid_uuu项--纵向，
.grid\uuuu sizer{
宽度：50%；
@介质（最小宽度：$bp介质）{
宽度：33.333%；
}
}
.grid\uuuu项--景观{
宽度：100%；
@介质（最小宽度：$bp介质）{
宽度：66.666%；
}
}
变量网格=$（'.grid'）。同位素({
项目选择器：'.grid\u项目'，
位置：正确，
砌体：{
列宽：'.grid\u sizer'
}
});
grid.imagesLoaded（）.progress（函数（））{
网格。同位素（“布局”）；
});

我的问题的答案似乎是：使用Pacery布局模式，而不是直接从Metafizzy开始的砌石布局模式：

如果你访问我在上面发布的代码笔url，你会看到它现在一切正常

---

谢谢Metafizzy

我的问题的答案似乎是：使用Pacery布局模式，而不是直接从Metafizzy开始的砌石布局模式：

如果你访问我在上面发布的代码笔url，你会看到它现在一切正常

谢谢Metafizzy

<ul class="grid" id="grid">
  <li class="grid__sizer"></li>
  <li class="grid__item grid__item--landscape fadable">
    <a href="#">
      <figure>
        <img src="http://noonsharp.design/client/tag/imgs/fpo-square/fpo-2x1.jpg" /> <!-- Landscape -->
        <figcaption class="grid__meta">
          <span class="grid__project-name">Project Title</span>
          <span class="grid__client-name">Client</span>
        </figcaption>
      </figure>
    </a>
  </li>
  <!-- ...and so on... -->


.grid__item--square,
.grid__item--portrait,
.grid__sizer {
  width: 50%;

  @media (min-width:$bp-medium) {
    width: 33.333%;
  }
}

.grid__item--landscape {
  width: 100%;

  @media (min-width:$bp-medium) {
    width: 66.666%;
  }
}
<!-- ...and so on... -->


var grid = $('.grid').isotope({
  itemSelector: '.grid__item',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid__sizer'
  }
});

grid.imagesLoaded().progress(function() {
  grid.isotope('layout');
});