同位素 - 尝试按原始顺序对项目进行排序

Question

我是在 stackoverflow 上发帖的新手，也使用 Codepen；所以请对我温柔一点！

在找到 David DeSandro 的精彩 Masonry 之后，我发现了令人惊叹的同位素。我一直在努力完成（我相信）维护项目原始顺序的非常简单的任务。在把我的头发扯了好几天之后（还尝试了 Vit ‘tasuki’ Brunner 的 Masonry Ordered）——我的语法显然有问题，希望得到任何帮助。

基本上，我有许多页面，每个页面都包含（不同）数量的“框”。每个盒子的宽度相同，但高度不同。这些框需要保持其原始顺序，并且在调整窗口大小时也保持该顺序。

示例代码：Isotope - trying to sort items by original order

这些盒子不会被编号 - 它们仅在我的 Pen 中编号以用于说明。

HTML：

<div id="container">

    <div class="prod one"><h1>One</h1></div>
    <div class="prod two"><h1>Two</h1></div>
    <div class="prod three"><h1>Three</h1></div>    
    <div class="prod four"><h1>Four</h1></div>
    <div class="prod five"><h1>Five</h1></div>  
    <div class="prod six"><h1>Six</h1></div>
    <div class="prod seven"><h1>Seven</h1></div>    
    <div class="prod eight"><h1>Eight</h1></div>    
    <div class="prod nine"><h1>Nine</h1></div>
    <div class="prod ten"><h1>Ten</h1></div>
    <div class="prod eleven"><h1>Eleven</h1></div>
    <div class="prod twelve"><h1>Twelve</h1></div>
    <div class="prod thirteen"><h1>Thirteen</h1></div>
    <div class="prod fourteen"><h1>Fourteen</h1></div>
    <div class="prod fifteen"><h1>Fifteen</h1></div>
    <div class="prod sixteen"><h1>Sixteen</h1></div>
    <div class="prod seventeen"><h1>Seventeen</h1></div>        

</div>  <!-- /end container -->

CSS（在此道歉 - 尽管进行了多次尝试，但我的帖子似乎不允许我将其作为代码放入 - 尽管它可以验证 - 请参阅我的 CodePen 示例。

JS：

var $container = $('#container');
    // init
    $container.isotope({
    // options
    itemSelector: '.prod',
    layoutMode: 'masonry'
    });

下面的 JS '工作'，但使盒子大小相同并且彼此间隔：

        $('.prod').isotope({
    getSortData: {
    sortBy: 'original-order'
    }
    });

我也尝试过使用 Masonry Ordered，但得到了相同的结果。我尝试从Vit 'tasuki' Brunner's Photo gallery demo 复制代码并尝试为此做一支笔，但似乎无法让它工作。

我也尝试过在 HTML 中初始化 Isotope，并认为我的语法没问题，使用有效的 JSON - 但同样没有成功：

<div id="container" class="js-isotope" data-isotope-options='{ "itemSelector": ".prod", "layoutMode": "masonry", "sortBy": "original-order" }'>

Anyhoo，我已经胡扯太久了。如果有人可以向我指出显而易见的事情，我将非常感激！

谢谢 韦伯

Answer 1

不幸的是，在使用同位素时，这是一个常见的误解。排序设置仅指定元素的插入顺序。原始顺序意味着元素 1 放在 DOM 中的第一位，元素 2 放在第二位，依此类推。每次插入后，算法都会尝试找到最合适的位置。

Isotope 使用贪心优先拟合算法，将元素从左到右、从上到下放置。发生的情况是在第一行元素之后（算法到达右侧的末尾），它检查下一行是否有可用空间。一旦它找到一个有空闲空间的行，它就会将下一个（由原始顺序指定）元素放在那里。

这会导致您感知到的错误顺序，这在同位素的意义上是正确的。

例子：

a  +---+  +---+  +---+
b  | 1 |  | 2 |  | 3 |
c  |   |  |   |  |   |
d  |   |  +---+  |   |
e  |   |  +---+  +---+
f  +---+  | 4 |  +---+
g  +---+  |   |  | 5 |
h  | 6 |  +---+  |   |
   |   |         |   |
   +---+         +---+

1. 前三个元素是直截了当的，a行已用尽。
2. 元素 4 被插入到 DOM 中，Isotope 搜索放置它的位置。行 b、c 和 d 没有空间了。
3. 算法检查行 e，找到可用空间并将元素 4 放在那里。
4. 行 e 已用完，因此将元素 5 放在下一行。
5. 最后元素 6 被放置在第一行 (g) 中，该行有一个可用空间。这个位置留给元素 4 和 5，看起来顺序可能被打乱了。

对于尽可能填充空间的所有算法，都可以感知到完全相同的情况。这样做的原因是，装箱（最小化空间的问题）和排序本质上是完全正交的东西。

如果你想要两者，你必须做出妥协。幸运的是，Isotope 实现了这样的妥协。例如布局模式fitRows 保持顺序，同时仍然最小化水平空间。