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

Question

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

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

基本上,我有许多页面,每个页面包含(不同的)"盒子"数量.每个盒子都有相同的宽度,但高度不同.这些框必须按原始顺序排列,并在调整窗口大小时保留该顺序.

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

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

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'towuki'Brunner的照片库演示中的代码,并试图为此做一个笔,但似乎无法让它工作.

我也试过在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意义上是正确的.

例:

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保持排序,同时仍然最小化水平空间.