按数据属性同位素排序

Question

我正在尝试使用 getSortData 作为同位素。我使用数据属性作为排序编号。当我的数据属性低于 10 时它工作正常。仅适用于 0-9 数字。在这个例子中，我展示了我的代码，其中最后一项的数据顺序为 12。同位素将其用作 1 并错误地排序。

这是我的 HTML:

<div class="isotope">
    <div data-order="0" class="box"></div>
    <div data-order="1" class="box"></div>
    <div data-order="2" class="box"></div>
    <div data-order="12" class="box"></div>
</div>

这是 JS:

$grid = $('.isotope');
$grid.each(function(index, el) {
    $(this).isotope({
        itemSelector : '.box',
        layoutMode : 'masonry',
        masonry: {
            gutter: 20,
            isFitWidth: true
        },
        getSortData: {
            category: '[data-order]'
        },
        sortBy : 'category'
    });

});

Answer 1

Isotope 根本不知道它实际上是一个数字，所以我们需要稍微告诉他一下。

$( document ).ready( function() {
  $grid = $('.isotope');
  $grid.each(function(index, el) {
    $(this).isotope({
        itemSelector : '.box',
        layoutMode : 'masonry',
        masonry: {
            gutter: 20,
            isFitWidth: true
        },
        getSortData: {
            category: '[data-order] parseInt'
        },
        sortBy : 'category'
    });

 });
});

片段：http://codepen.io/anon/pen/gaEBza

来源：http://isotope.metafizzy.co/methods.html

Answer 2

你应该试试这个。

$(".isotope div").sort(sort_li).appendTo('.isotope'); 

// sort function callback    
function sort_li(a, b){
    return ($(b).data('order')) < ($(a).data('order')) ? 1 : -1;    
}

按数据属性同位素排序

Isotope sort item by data attribute

html

jquery

jquery-isotope