jQuery:结合"filterable portfolio“和Masonry layout

Question

我正在尝试将"filterable portfolio“(http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/)与Masonry布局结合起来……所以我想让我的项目在过滤后与masonery重新调整，但它们留在masonery放置它们的位置…

这是我非常粗略的第一个网站草稿：http://waynetest.kilu.de/lula/ (工作显然正在进行中..；)

有没有可能将两个js-script结合起来？

非常感谢，katharina

Answer 1

您可以随时尝试使用http://isotope.metafizzy.co/

Answer 2

首先创建一个隐藏的div，并将实际数据放入其中。在本例中，我们将其称为#hidden。然后，为主砖石结构创建一个空白div。我们称它为#masonry。所以，到目前为止，我们已经有了这样的东西：

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

这些项将被它们的data-rel检测到，所以不要忘记将所有的过滤器都作为这些项的data-rel。例如：

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

作为筛选器，创建如下列表：

<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>

现在，以这种方式处理初始填充和过滤函数：

// 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();
        }
    }
});

这种方法在砖石v4上进行了测试，效果最好。

Answer 3

我想要同样的东西，并最终让它工作。

请参阅：http://jasondaydesign.com/masonry_demo/

希望这能满足你的需求。