Question

我正在尝试将getSortData用于同位素。我使用数据属性作为排序号。它工作正常，而我的数据属性低于10.仅适用于0-9数字。在这个例子中，我正在显示我的代码，其中最后一项具有数据顺序12. Isotope将其用作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

ssource：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;    
}

按数据属性

2 个答案: