Recently i have been working on a frontend layout task. The two jQuery plugins, Isotope and Masonry written by David DeSandro, are wonderful for laying your content in neat order. Isotope is an advanced version of Masonry and provides more powerful features. If you are new to both, you could try Masonry first.

Let’s back to the topic today. Both Isotope and Masonry provide the remove() function to withdraw the item from the dynamic layout. If you are using Masonry, the layout does not rearrange the items after the removal. On the other hand, the more powerful Isotope will relayout after the items are deleted. Actually this is a more desirable feature but this time i just want to delete those unwanted items without triggering the relayout.

So i posted a question on the Isotope GitHub project and get the solution. here you are. Suppose i want to remove the first 3 Isotope items

// Add the .out class for the first 3 isotope items
$('.isotope-item:eq(0)').addClass('out');
$('.isotope-item:eq(1)').addClass('out');
$('.isotope-item:eq(2)').addClass('out');

// Remove the .out isotope items without relayout
$out = $('.isotope-item.out');
var isotopeInstance = $('#container').data('isotope');
isotopeInstance.$allAtoms = isotopeInstance.$allAtoms.not($out);
$out.remove();

Thanks David for his quick response and creating such those very nice plugins. =D

Done =)

Reference:

• desandro / isotope – remove without relayout
• Isotope
• Masonry