Как сохранить порядок блоков в masonry (кирпичная кладка)?

Question

[Sergey750il]

Доброго времени суток. Использую библиотеку masonry для создания "кирпичной кладки". но проблема в том что он путает блоки, а у каждого блока есть дата в результате получается каша. Нашел плагин для сортировки https://masonry-ordered.tasuki.org/options/ но он не работает.

Answer 1

[Владислав]

Ну так у вас скорей всего стоит режим "packery" он меняет местами блоки что бы уменьшить высоту у блока родителя. Как вариант то сортировать блоки по дата атрибуту. Но я обычно использую: isotope.metafizzy.co/sorting.html

Comments

[Sergey750il]

Изотоп тоже пробовал, но у меня почему то не работает сортировка как в оригинале когда выставляю опцию.

[Sergey750il]

$('.masonry').isotope({
itemSelector: '.item',
sortBy: 'original-order'
});

[Владислав]

Sergey750il: Попробуйте добавить свой атрибут и сортировать по его номеру например.

[Sergey750il]

data-number=1 и в опциях указать sortBy: 'number'?

[Владислав]

Или поэксперементируйте с isotope.metafizzy.co/layout-modes.html

[Владислав]

Sergey750il: еще надо getSortData писать... codepen.io/desandro/pen/sxAJL

[Sergey750il]

Владислав: $('.masonry').isotope({
itemSelector: '.item',
layoutMode: 'fitColumns'
});

почему то вообще не работают эти опции, когда их назначаю все падает.

[Sergey750il]

Сделал так:
var $grid = $('.masonry').isotope({
itemSelector: '.item',
layoutMode: 'fitRows',
getSortData: {
// color: '[data-color]',
number: '.date-event parseInt'
},
// sort by color then number
sortBy: ['number' ]
});
Но он теперь высоту блок вычисляет не правильно и остаются зазоры.

[Владислав]

layoutMode: 'fitRows',
fitRows: {
gutter: 0
}

[Sergey750il]

когда убираю опцию layoutMode: 'fitRows', блоки подгоняются верно, но пропадает сортировка

[Sergey750il]

Владислав: Не срабатывает...