同位素-尝试按原始顺序对项目进行排序。
我是一个新手，在堆叠溢出，也使用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
回答 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 | +---+ | |
| | | |
+---+ +---+- 前三个元素是直接向前的，直线a被耗尽。
- 元素4被插入到DOM中，同位素搜索适合它的位置。b、c和d行已经没有空间了。
- 算法检查行e，找到空闲空间，并将元素4放在那里。
- e行已耗尽，因此元素5将放在下一行。
- 最后，元素6放置在具有空闲空间的第一行(g)中。这个位置留给元素4和5，这些元素看起来像是被洗牌了。
所有算法都能感知到完全相同的情况，这些算法尽可能地填充空间。其原因是，垃圾箱包装(空间最小化的问题)和订单在本质上是完全正交的。
如果你想两者兼而有之，你必须做出妥协。幸运的是，同位素实现了这样的妥协。例如，布局模式fitRows保持排序，同时仍然最小化水平空间。
https://stackoverflow.com/questions/29052151
复制相似问题
腾讯云开发者
