同位素和DOM顺序

在此CodePen（http://codepen.io/marcamos/pen/LkZByj）我建立了一个同位素图像网格，可以是正方形、横向或纵向，其中横向是正方形的2倍宽，纵向是正方形的两倍高（CodePen中的HTML、CSS和JS示例位于本文底部。）

不管视口宽度如何，我看到的是一个空白区域，我认为一个正方形会直接移动到该区域。请参阅此屏幕截图：https://dl.dropboxusercontent.com/u/1851858/Grid_Demo.jpg

这让我觉得同位素受到DOM顺序的限制…这很可能是真的，但我认为同位素的砖石布局会忽略这些东西，并填充所有可用空间。我错了吗？

<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');
});