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;
    });
})

Answer 2

如果你看一下＆＃34; li＆＃34;的CSS属性。元素，你看他们的定位和绝对的＃34;使用＆＃34; left＆＃34;的像素值。你想要的是＆＃34; float：left＆＃34;。但我不了解AwesomeGrid所以我无法在不进一步研究的情况下为您提供解决方案。

隐藏其他人时浮动列表项目

2 个答案: