The automatic layout of Isotope masonry overrides the sortby?

Question

I am using isotope masonry (version 2 Beta 7) to attempt to sort items 1 to 8 that are not sorted.

Who has the priority Masonry automatic layout or getSortData option?

I have 4 columns and 2 rows unsorted:

1 2 3 4
5 8 7 6

But what I want is the following:

1 2 3 4
5 6 7 8

The code I'm using is as follows:

 <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',
});
});

The complete code is in Fiddle

Thanks a lot.

Answer 1

The sorting defines the order in which your items are inserted in the layout. However, the actual positions are the result of the masonry algorithm. Now here lies the inherent problem: An ordered layout and a space-efficient layout are two orthogonal things.

As a consequence, you can't have a guaranteed ordering and masonry at the same time. You have to decide, whether you can drop one of the requirements. If you don't really need a guarantee for the ordering, you can still get away with your solution, because the ordering acts as some kind of priority (this means early items have a good chance to appear early in the layout).