jQuery：结合“可过滤的组合”和砌体布局

发布于 2024-08-22 00:05:07 字数 502 浏览 4 评论 0原文

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

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

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

多谢，凯瑟琳娜

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡莣 2024-08-29 00:05:07

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

回复收藏 0 原文

梦里南柯 2024-08-29 00:05:07

首先创建一个隐藏的div并将真实数据放入其中。在此示例中，我们将其称为#hidden。然后为主 Masonry 创建一个空白 div。我们称之为#masonry。因此，到目前为止，我们有这样的情况：

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

项目将通过其数据相关进行检测，因此不要忘记将所有过滤器作为项目的数据相关。例如：

<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 上进行了测试，效果最好。

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.

回复收藏 0 原文