jQuery Isotope – Remove Isotope items without triggering relayout

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:

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s