Javascript 在隐藏元素之前移动过滤元素

我正在尝试为六边形的元素制作一个非常特殊的过滤器，这些元素具有严格的顶部和左侧属性。 过滤元素时，我希望这些六边形移动到顶部，而不是在隐藏的元素中留下空间

图蒂
普罗多蒂
塞维齐
因弗斯坦蒂

通过使用jquery添加/删除类单独找到答案。 我想这不是什么花哨和聪明，但这是一个解决办法

$(".filter-button").click(function(){
    var value = $(this).attr('data-filter');

    if(value == "all")
    {
        $('.filter').show('1000');

        $( "#sette" ).removeClass( "row1 col2 row1 col1 mb-2" )
        $( "#sette").addClass("row2 col2bis ");
        $( "#nove" ).removeClass( "row2 col1bis mb-6" )
        $( "#nove").addClass("row2 col4bis mb-9");
        $( "#otto" ).removeClass( "row1 col4" )
        $( "#otto").addClass("col3bis row2");
        $( "#sei" ).removeClass( "row1 col4" )
        $( "#sei").addClass("col1bis row2");
    }

    else
    {
        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');


    if(value == "prodotti")
    {
        $( "#sette" ).removeClass( "row2 col2bis mb-7 row1 col1 " )
        $( "#sette").addClass("row1 col2 mb-2");
        $( "#nove" ).removeClass( "row2 col4bis mb-9" )
        $( "#nove").addClass("row2 col1bis mb-6");
    }

    if(value == "servizi")
    {
        $( "#sette" ).removeClass( "row1 col2 row2 col2bis mb-7 mb-2" )
        $( "#sette").addClass("row1 col1 mb-1");
        $( "#otto" ).removeClass( "col3bis row2 mb-8" )
        $( "#otto").addClass("row1 col4 mb-4");
    }

    if(value == "infestanti")
    {
        $( "#sette" ).removeClass( "row1 col2" )
        $( "#sette").addClass("row2 col2bis ");
        $( "#sei" ).removeClass( "col1bis row2 mb-6" )
        $( "#sei").addClass("row1 col4 mb-4");
    }
    }
});

}))

---

现场预览：

您有现场示例吗？@ultrarun使用CodePen更新您使用的是绝对定位，因此即使有些人出现问题，其他人仍将保持其位置。使用CSS浮动可能是一种选择，但由于形状不规则，仍然可能需要相对定位，这很棘手！您可以随时使用JS更改可见六边形的位置。不过看起来不错！也许能帮上忙

$(".filter-button").click(function(){
    var value = $(this).attr('data-filter');

    if(value == "all")
    {
        $('.filter').show('1000');

        $( "#sette" ).removeClass( "row1 col2 row1 col1 mb-2" )
        $( "#sette").addClass("row2 col2bis ");
        $( "#nove" ).removeClass( "row2 col1bis mb-6" )
        $( "#nove").addClass("row2 col4bis mb-9");
        $( "#otto" ).removeClass( "row1 col4" )
        $( "#otto").addClass("col3bis row2");
        $( "#sei" ).removeClass( "row1 col4" )
        $( "#sei").addClass("col1bis row2");
    }

    else
    {
        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');


    if(value == "prodotti")
    {
        $( "#sette" ).removeClass( "row2 col2bis mb-7 row1 col1 " )
        $( "#sette").addClass("row1 col2 mb-2");
        $( "#nove" ).removeClass( "row2 col4bis mb-9" )
        $( "#nove").addClass("row2 col1bis mb-6");
    }

    if(value == "servizi")
    {
        $( "#sette" ).removeClass( "row1 col2 row2 col2bis mb-7 mb-2" )
        $( "#sette").addClass("row1 col1 mb-1");
        $( "#otto" ).removeClass( "col3bis row2 mb-8" )
        $( "#otto").addClass("row1 col4 mb-4");
    }

    if(value == "infestanti")
    {
        $( "#sette" ).removeClass( "row1 col2" )
        $( "#sette").addClass("row2 col2bis ");
        $( "#sei" ).removeClass( "col1bis row2 mb-6" )
        $( "#sei").addClass("row1 col4 mb-4");
    }
    }
});