我正在使用同位素砌体(版本 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
非常感谢。
最佳答案
排序定义了项目在布局中插入的顺序。然而,实际位置是砌体算法的结果。现在存在一个固有的问题:有序布局和节省空间的布局是两个正交的东西。
因此,您无法同时保证订购和砌筑。您必须决定是否可以放弃其中一项要求。如果您确实不需要顺序保证,您仍然可以摆脱您的解决方案,因为顺序充当某种优先级(这意味着早期的项目有很好的机会出现在布局的早期)。
关于javascript - 同位素砌体的自动布局会覆盖排序吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21277706/