sortBy original-order not sorting items #764
Description
I have a fluid isotope grid setup, I'm looking to keep the original order all the time, even when the browser window is resized. Thus I thought using sortBy: 'original-order', would solve this problem, but the .grid-block divs aren't keeping their original order.
Here's a jsfiddle demo to demostrate: http://jsfiddle.net/2kmGL/
and the jQuery markup as follows:
$(document).ready(function () {
setTimeout(function () {
$('.grid-wrap').isotope({
sortBy: 'original-order',
sortAscending: true
});
}, 1000);
});
$(function () {
var $container = $('.grid-wrap');
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.grid-block',
sortBy: 'original-order',
sortAscending: true,
animationEngine: 'best-available',
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: {
columnWidth: $container.width() / 4
},
itemPositionDataEnabled: true,
onLayout: function (elems, instance) {
var items, rows, numRows, row, prev, i;
// gather info for each element
items = elems.map(function () {
var el = $(this),
pos = el.data('isotope-item-position');
return {
x: pos.x,
y: pos.y,
w: el.width(),
h: el.height(),
el: el
};
});
// first pass to find the first and last items of each row
rows = [];
i = {};
items.each(function () {
var y = this.y,
r = i[y];
if (!r) {
r = {
y: y,
first: null,
last: null
};
rows.push(r);
i[y] = r;
}
if (!r.first || this.x < r.first.x) {
r.first = this;
}
if (!r.last || this.x > r.last.x) {
r.last = this;
}
});
rows.sort(function (a, b) {
return a.y - b.y;
});
numRows = rows.length;
// compare items for each row against the previous row
for (prev = rows[0], i = 1; i < numRows; prev = row, i++) {
row = rows[i];
if (prev.first.x < row.first.x && prev.first.y + prev.first.h > row.y) {
row.first = prev.first;
}
if (prev.last.x + prev.last.w > row.last.x + row.last.w && prev.last.y + prev.last.h > row.y) {
row.last = prev.last;
}
}
// assign classes to first and last elements
elems.removeClass('first last');
$.each(rows, function () {
this.first.el.addClass('first');
this.last.el.addClass('last');
});
}
});
});
// update columnWidth on window resize
$(window).smartresize(function () {
if ($(window).width() > 500) {
$('.grid-wrap').isotope({
masonry: {
columnWidth: $('.grid-wrap').width() / 4
}
});
}
if ($(window).width() < 500) {
$('.grid-wrap').isotope({
masonry: {
columnWidth: $('.grid-wrap').width() / 2
}
});
}
if ($(window).width() < 400) {
$('.grid-wrap').isotope({
masonry: {
columnWidth: $('.grid-wrap').width() / 1
}
});
}
});
});
Is there a reason this isn't working / can it at all be achieved?