jQuery: Combining "filterable portfolio" and Masonry layout

I'm trying to combine the "filterable portfolio" (http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/) with the Masonry layout ..开发者_开发技巧. so I want my items to readjust with masonery after I filtered them, but they stay in the position where masonery put them...

here's my very rough first website draft: http://waynetest.kilu.de/lula/ (work obviously in progress..;))

Is there a possibility to combine both js-scripts?

thanks a lot, katharina

You could always try http://isotope.metafizzy.co/

First create a hidden div and put the real data to it. In this example we call it #hidden. Then create a blank div for the main Masonry. We call it #masonry. So, we have something like this so far:

<div id="hidden"> ... CONTAINING THE ACTUAL DATA ... </div>
<div id="masonry"></div> <!-- which is a blank div -->

The items will be detected by their data-rel so don't forget to all the filters as data-rel to the items. E.g:

<div class="work" data-rel="Template Design">CONTENT</div>

As the filters, create a list like this:

<ul id="port_filter">
    <li data-rel="all" class="active">All</li>
    <li data-rel="Graphic Design">Graphic Design</li>
    <li data-rel="Template Design">Template Design</li>
    <li data-rel="Programming">Programming</li>
</ul>

Now, handle the initial filling and the filtering functions this way:

// Initial loading
var all = $('#hidden .work');
$('#masonry').html(all);
$('#masonry').masonry({
    itemSelector: '.work',
    columnWidth: 299
});

// Portfolio filtering
$('#port_filter li').click(function(){
    if($(this).hasClass('active')) {
        return;
    }
    else {
        $('#port_filter li').removeClass('active');
        var filter = $(this).attr('data-rel');
        $(this).addClass('active');
        if(filter == 'all') {
            $('#masonry').html(all);
            $('#masonry').masonry();
        }
        else {
            $('#masonry').html('').html(all);
            removed = null;
            var removed = $('#masonry .work[data-rel!="' + filter + '"]');
            removed.remove();
            $('#masonry').masonry();
        }
    }
});

This method is tested on Masonry v4 and the best.

I wanted the same thing and finally have it working.

See: http://jasondaydesign.com/masonry_demo/

Hopefully that works for your needs.