I'm using jQuery Isotope to fill in the spaces on a multi-width multi-height grid (equal proportions).
The grid is sorted using ui-sortable with a button to toggle back to Isotope after sorting. There are some sort orders that leave empty blocks. How can I use Isotope to fill in the spaces?
I've experimented with multiple Isotope layout methods.
See http://jsfiddle.net/zdSYG/41/
$(document).ready(function() {
var $itemList = $('#sortable');
$itemList.isotope({
resizesContainer: false,
masonry: {
rowHeight: 250,
columnWidth: 325
}
});
$('#wp-admin-bar-edit').click(function() {
$itemList.isotope('destroy');
$itemList.sortable({
//Do Ajax Stuff with UI-Sort Order
});
});
});
//Toggle back to Isotope after jQuery UI-Sortable Ajax stuff
$(document).ready(function() {
$('#wp-admin-bar-sort').click(function() {
$('#sortable').isotope({
resizesContainer: false,
masonry: {
rowHeight: 250,
columnWidth: 325
}
});
});
});
Udate:
The desired affect is achieved in Firefox 4, and IE 8 & 9 but the issue seems to be with Google Chrome (Latest version stable channel).
