同位素-尝试按原始顺序对项目进行排序 [英] Isotope - trying to sort items by original order

问题描述

我是在stackoverflow上发帖的新手，并且还在使用Codepen.所以请和我一起温柔！

I'm a newbie to posting on stackoverflow, and also using Codepen; so please go gentle with me!

在找到戴维·德桑德罗(David DeSandro)的绝妙石工之后，我又发现了奇异的同位素.我一直在尝试完成(我认为)维护项目原始顺序这一非常简单的任务.将我的头发拉了好几天(还尝试了Vit的"tasuki" Brunner的砌体命令)-我的语法显然有问题，请帮忙.

After finding the wonderful Masonry by David DeSandro, I then found the amazing Isotope. I've been trying to accomplish what (I believe) should be the very simple task of maintaining the original order of items. After tearing my hair out for days (and also trying Vit ‘tasuki’ Brunner's Masonry Ordered) -I've obviously got something wrong with my syntax and would appreciate any help, please.

基本上，我有很多页面，每个页面包含(不同)数量的盒子".每个盒子的宽度相同，但高度不同.框必须保持其原始顺序，并且在调整窗口大小时也应保持该顺序.

Basically, I have a number of pages, each containing a (different) number of 'boxes'. Each box will have the same width, but varying height. The boxes need to be in their original order and also retain that order when the window is resized.

示例密码:同位素-试图按原始顺序对商品进行排序

这些框将不会编号-它们仅在我的钢笔中编号以用于说明.

The boxes will NOT be numbered - they are only numbered in my Pen for illustration.

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示例.

CSS (my apologies here - despite numerous attempts, my post won't seem to allow me to put this in as code - although it validates - please see my CodePen example.

JS:

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

作品"下面的JS，但是使盒子的大小相同且彼此隔开:

The JS below 'works', but makes the boxes all the same size and distanced from each other:

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

我也尝试使用Masonry Ordered，但得到的结果相同.我尝试从 Vit'tasuki'Brunner的照片库演示中复制代码，然后也尝试过为此设计一支笔，但似乎无法使其正常工作.

I've also tried using Masonry Ordered, but get the same results. I've tried to replicate the code from Vit 'tasuki' Brunner's Photo gallery demo and have tried to do a Pen for this, too, but can't seem to get it to work.

我还尝试了在HTML中初始化同位素，并认为我的语法可以，使用有效的JSON-但同样，没有成功:

I've also tried inialising Isotope in HTML, and think my syntax is OK, using valid JSON - but again, no success:

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

Anyhoo，我玩了太久了.如果有人可以向我指出明显的地方，我将非常有责任！

Anyhoo, I've waffled on for far too long already. I'd be really obliged if someone could point out the obvious to me!

谢谢 Webbo

推荐答案

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

Unfortunately this is a common misconception, when using Isotope. The ordering setting just specifies in which order your elements are inserted. Original order means that element 1 is put first in the DOM, element 2 second and so on. After each insertion the algorithm tries to find the best fitting place.

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

Isotope uses a greedy first fit algorithm, which puts the elements from left to right, from top to bottom. What happens is that after the first row of elements (algorithm reached the end of the right side), it checks if there is free space in the next line. Once it finds a line with free space it puts the next (specified by original order) element there.

这会导致您发现错误的顺序，这在同位素意义上是正确的.

This results in your perceived wrong order, which is just correct in the sense of Isotope.

示例:

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

1. 前三个元素简单明了，线 a 已用尽.
2. 元素 4 插入到DOM中，并且同位素搜索适合它的位置.行 b ， c 和 d 没有剩余空间.
3. 算法检查 e 行，找到可用空间，然后在其中放置元素 4 .
4. 第 e 行已用尽，因此元素 5 放在下一行.
5. 最后一个元素 6 放置在第一行( g )中，该行具有可用空间.此位置留给元素 4 和 5 ，看起来好像顺序被打乱了.

1. The first three elements are straight forward and line a is exhausted.
2. Element 4 is inserted into the DOM and Isotope searches for a place to fit it in. Lines b, c and d have no space left.
3. Algorithm checks line e, finds free space and puts element 4 there.
4. Line e is exhausted, so element 5 is put on the next line.
5. Finally element 6 is placed into the first line (g) that has a free space. This place is left to element 4 and 5, which may look like the ordering is shuffled.

使用所有算法尽可能地填满整个空间，可以看到完全相同的结果.其原因是，装箱(最小化空间的问题)和排序在本质上是完全正交的东西.

The exactly same can be perceived with all algorithms that fill the space as best as possible. The reason for this is, that bin packing (the problem of minimizing space) and orderings are totally orthogonal things in their nature.

如果两者都想要，则必须做出让步.幸运的是，同位素实现了这样的折衷方案.例如，布局模式fitRows保持顺序，同时仍使水平空间最小.

If you want both, you have to make a compromise. Luckily Isotope implements such compromises. For example layouting mode fitRows keeps the ordering, while still minimizing the horizontal space.

这篇关于同位素-尝试按原始顺序对项目进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！