How to trigger Masonry when a category gets clicked on?

Question

I am using the wonderful masonry cascading grid layout library to display a number of projects on my website.

This is my javascript:

var container = document.querySelector('#projects');
var msnry = new Masonry( container, {
  // options
  columnWidth: 280,
  itemSelector: '.project'
});

Now, in the sidebar of my website I am also listing the various categories that my projects belong to, so a user can filter them.

It would be nice if a click on a category would also trigger the masonry effect, a bit like in this example.

How can this be achieved?

I am fairly new to Javascript and jQuery, so the solution is probably a simple one.

Thanks for any help.

Gigamegs · Answer 1 · 2013-08-27T16:12:26.963

0

It can be done by appending new bricks to the container and run it with masonry.reload() with option animate enable. Instead to use append you can also use prepend. You can also check this site http://www.maxmedia.com.

edited Aug 27 '13 at 16:12

answered Aug 26 '13 at 18:47

Gigamegs

12,342
7
31
71

Thanks. I studied your code but it's too advanced for a javascript n00b like me. Would you care to provide a code snippet? – Tintin81 Aug 27 '13 at 08:31
I tried to email you through your website but: `Delivery Status Notification (Failure)` – Tintin81 Aug 27 '13 at 08:58
I just did. Hope you received it. – Tintin81 Aug 27 '13 at 10:20

score -2 · Answer 2 · answered Aug 26 '13 at 18:21

-2

Take a peek at the JQuery Isotope plugin: http://isotope.metafizzy.co/

It can do sorting and filtering in the Masonry style.

answered Aug 26 '13 at 18:21

JimTheDev

3,399
1
21
26

How to trigger Masonry when a category gets clicked on?

2 Answers2