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

Stack Overflow用户

提问于 2015-03-14 09:45:55

回答 1查看 2.5K关注 0票数 1

我是一个新手，在堆叠溢出，也使用Codepen；所以请温和地对待我！

在找到大卫DeSandro的精彩砖石之后，我发现了惊人的同位素。我一直在努力完成(我认为)应该是非常简单的任务，维持项目的原始顺序。在把我的头发扯掉几天(也尝试了Vit‘tasuki’Brunner的砌体)之后--显然我的语法出了问题，请给我任何帮助。

基本上，我有很多页，每个页面都包含一个(不同的)数目的“方框”。每个盒子将有相同的宽度，但不同的高度。这些框需要保持原来的顺序，并在调整窗口大小时保留该顺序。

示例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示例)。

联署材料：

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

下面的JS工作，但使所有的盒子都一样大小和彼此之间的距离：

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

我也尝试使用砖石排序，但得到了同样的结果。我试图复制来自Vit 'tasuki‘Brunner的图片库演示的代码，并尝试为此做笔，但似乎无法使它发挥作用。

我还尝试过在HTML中引导同位素，并认为我的语法没有问题，使用了有效的JSON --但同样没有成功：

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

总之，我已经唠叨了很久了。如果有人能向我指出显而易见的事情，我会非常感激的！

谢谢Webbo

jquery-isotope

masonry

sorting

大模型图像创作引擎特惠活动

AIGC图片生成与编辑，多场景适用，使用便捷，新用户19.9元起！

回答 1

Stack Overflow用户

发布于 2015-03-16 15:12:36

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

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

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

示例：

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