1

我正在尝试将“可过滤的投资组合”（http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/）与砌体布局结合起来......所以我希望我的物品在过滤后用砖石重新调整，但它们停留在砖石放置它们的位置......

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

是否有可能结合两个 js 脚本？

非常感谢，凯瑟琳娜

4

3 回答 3

2

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

于 2011-07-19T14:57:52.797 回答
0

首先创建一个隐藏的 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();
        }
    }
});

此方法在 Masonry v4 和最佳版本上进行了测试。

于 2017-02-01T16:02:19.297 回答
-1

我想要同样的东西，终于让它工作了。

见：http: //jasondaydesign.com/masonry_demo/

希望这可以满足您的需求。

于 2010-05-14T19:18:41.740 回答