Question

我是在stackoverflow上发布的新手，也是使用Codepen的新手;所以请和我一起温柔！

在David DeSandro找到了精彩的砌体后，我找到了惊人的同位素。我一直在努力完成（我相信）应该是维护项目原始顺序的非常简单的任务。撕掉我的头发好几天之后（还尝试了'''''''''''''''''''''''''''''''''''''''''''''''''''... ...

基本上，我有很多页面，每个页面都包含（不同的）“盒子”数量。每个盒子都有相同的宽度，但高度不同。这些框必须按原始顺序排列，并在调整窗口大小时保留该顺序。

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

这些方框不会被编号 - 它们仅在我的笔中编号以供说明。

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中的代码并试图为此做一个Pen，但似乎无法让它工作。

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

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

Anyhoo，我已经唠叨了太久了。如果有人可以向我指出显而易见的事情，我真的很有责任！

由于 Webbo

Answer 1

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

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

这导致您感知错误的顺序，这在Isotope意义上是正确的。

示例：

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

前三个元素是直线前进， a 线已用尽。
将元素 4 插入到DOM中，并且Isotope会搜索适合它的位置。行 b ， c 和 d 没有剩余空间。
算法检查 e 行，找到可用空间并将元素 4 放在那里。
线 e 已用尽，因此 5 元素将放在下一行。
最后将元素 6 放入具有可用空间的第一行（ g ）。这个地方留给元素 4 和 5 ，这可能看起来像是排序。

使用尽可能最好地填充空间的所有算法都可以感知完全相同。原因在于，装箱（最小化空间的问题）和排序本质上是完全正交的。

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

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

1 个答案: