javascript - 同位素砌体的自动布局会覆盖排序吗？

Question

我正在使用同位素砌体(版本 2 Beta 7)尝试对未排序的项目 1 至 8 进行排序。

谁拥有优先 Masonry 自动布局或 getSortData 选项？

我有 4 列和 2 行未排序:

1 2 3 4
5 8 7 6

但我想要的是以下内容:

1 2 3 4
5 6 7 8

我使用的代码如下:

 <div id="container" class='isotope'>
    <div class='item'>
        <img src="http://placehold.it/185x92" width="185" height="92" alt="">
        <div>
            <span class='titulo'>H</span>
            <span class='orden'>1</span>
        </div>
    </div>
    ...
 </div>


$(function(){

var $container = $('#container');
$container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: 185,
        gutter: 10,
        isFitWidth: true,
    },
    getSortData : { 
        numero : '.orden parseInt',
        titulo : '.titulo'
    },
    sortBy : 'numero',
});
});

完整代码在 Fiddle

非常感谢。

Answer 1

排序定义了项目在布局中插入的顺序。然而，实际位置是砌体算法的结果。现在存在一个固有的问题:有序布局和节省空间的布局是两个正交的东西。

因此，您无法同时保证订购和砌筑。您必须决定是否可以放弃其中一项要求。如果您确实不需要顺序保证，您仍然可以摆脱您的解决方案，因为顺序充当某种优先级(这意味着早期的项目有很好的机会出现在布局的早期)。