同位素和 DOM 顺序答案

【问题标题】：Isotope and DOM Order同位素和 DOM 顺序
【发布时间】：2016-07-29 03:11:57
【问题描述】：

在这个 CodePen (http://codepen.io/marcamos/pen/LkZByj) 中，我设置了一个由正方形、横向或纵向图像组成的同位素网格，其中横向是正方形的 2 倍宽，纵向是正方形的 2 倍高。 （CodePen 中的 HTML、CSS 和 JS 示例在本文底部。）

无论视口宽度如何，我都看到上面有一个空白区域，我认为一个正方形会向右移动。看这个截图：https://dl.dropboxusercontent.com/u/1851858/Grid_Demo.jpg

这让我印象深刻，因为 Isotope 受到 DOM 顺序的限制……这很可能是真的，但我认为 Isotope 的 Masonry 布局会忽略这些东西并填充所有可用空间。我错了吗？

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

【问题讨论】：

标签： javascript jquery jquery-isotope

【解决方案1】：

看来我的问题的答案是：使用 Packery 布局模式而不是 Masonry，直接来自 Metafizzy：https://twitter.com/metafizzyco/status/758733290136178691

如果您访问我在上面发布的 CodePen 网址，您会看到现在一切正常。

感谢 Metafizzy！

【讨论】：