jQuery Filtr.js and Packery Callback

Question

This may pull off as a bit of a n00b question, but I am a jQuery n00b. I've combined bin sorting (Packery) with filtering (Filtr.js) here (search box at top left). Problem is once you filter, spaces are left in the layout until you resize the window which refreshes the layout. Filtr.js has a callback function after filtering, and I'd like it to refresh the layout. I've tried:

$('input[name="filter"]').filtr($('#thumbs div'), {    
    afterFilter: function(){
        pckry.layout();
    }
});

To no avail. I've tried my best to implement afterFilter from here and Packery refreshing via pckry.layout(). I can't tell whether this just isn't possible to do, or if I haven't written this correctly?

Answer 1

It looks good, but pckry isn't currently defined in your script. Instead of attaching Packery to the jQuery object, you can instantiate a new instance of Packery and define it as pckry (or whatever you want) like:

var pckry = new Packery($container[0], {
  itemSelector: '.item',
  gutter: 10
});

Note the [0] after your jQuery object to reference the original DOM object.