隐藏其他对象时剩余的浮动列表项

debugcn 发表于 Dev

雅各布的

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

在此处查看网站和代码：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;
});
});

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

在此先感谢提供帮助的任何人！

哈奇巴特

AwesomeGrid具有一个名为的内置属性hiddenClass，您可以将其定义hidden为隐藏的类选择器，然后在click事件之后调用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;
    });
})