javascript - float 列表项在隐藏其他项时保留

Question

我遇到了一个问题，我的列表项在通过过滤器切换其他列表项的可见性时没有自动向左浮动。

请在此处查看网站和代码: http://javinladish.com/dev/

例如，当您切换“手套”时，手套不应出现在同一个位置，而是移至列表中的第一个位置。

是我使用的名为 AwesomeGrid 的插件导致了这个问题吗？它可能绝对定位 li 元素，但我不确定。

我用来切换过滤器和列表项的 jQuery 代码是:

$(document).ready(function() {
$('ul#filter a').click(function() {
    $(this).css('outline','none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
        $('ul.grid li.hidden').fadeIn('slow').removeClass('hidden');
    } else {
        $('ul.grid li').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut('normal').addClass('hidden');
            } else {
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
    }

    return false;
});
});

如何确保在过滤列表项时它们始终向左浮动？

提前感谢任何提供帮助的人!

Answer 1

AwesomeGrid 有一个名为hiddenClass 的内置属性，您可以将hidden 定义为您的隐藏类选择器，然后在点击事件后调用AwesomeGrid。基本上代码将是这样的:

$(window).load(function(){

    function grid_relayout() {
        $('ul.grid').AwesomeGrid({
            responsive  : true,
            initSpacing : 0,
            rowSpacing  : 28,
            colSpacing  : 28,
            hiddenClass : 'hidden',
            columns     : {
                'defaults' : 3,
                '990'      : 2,
                '650'      : 1
            }
        })
    }

    grid_relayout();

    $('ul#filter a').click(function() {
        $(this).css('outline','none');
        $('ul#filter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','-');

        if(filterVal == 'all') {
            $('ul.grid li.hidden').fadeIn('slow').removeClass('hidden');
        } else {
            $('ul.grid li').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('normal').addClass('hidden');
                } else {
                    $(this).fadeIn('slow').removeClass('hidden');
                }
            });

        }

        grid_relayout()

        return false;
    });
})