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

5 thoughts on “jQuery Isotope – Remove Isotope items without triggering relayout

  1. Jiro

    Hi,

    This is what I am looking for, instead of remove, I want to disable relayout on filtering. However, I tried to copy the code, but it’s no luck. The inspector show the error of “a Uncaught TypeError: Cannot read property ‘$allAtoms’ of null.” Could you please provide full code? Sorry for my lack of javascript knowledge.

    Like

    Reply
      1. Jiro

        Already but it didn’t work. However, I got the expected result after I modify some lines in isotope.js, taking relayout callback out and change atom position to relative instead of absolute. (to be honest, I cannot remember which lines, just randomly did and hope it went well!) Thanks for your help and nice to meet you, Cheers!

        Like

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