jquery - gridLayout + 可过滤的 div 框 --> 不诉诸

Question

我不是 javascript 专业人士或任何其他人。我只是将一些东西放在一起并希望它能起作用。

这就是我所做的。我从 nettuts+ 获取了有关 "filterable portfolio" 的教程东西并添加了jquery插件“jQuery.gridLayout”(phase-change.org/jquery.gridlayout/)一切工作正常。 Div 在网格上进行排序，当我单击类别链接时，它们就会消失。但他们应该在消失后采取补救措施。现在这些盒子停留在原来的位置，到处都留下了巨大的空白。

我的 JavaScript 调用如下所示

$(document).ready(function(){
                           
    $('ul#navigation a').click(function() {
    $(this).css('outline','none');
    $('ul#navigation .current').removeClass('current');
    $(this).parent().addClass('current');
    
    var filterVal = $(this).text().toLowerCase().replace(' ','-');
            
    if(filterVal == 'all') {
        $('#grid li.hidden').fadeIn('slow').removeClass('hidden');
    } else {
    
        $('#grid .box').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut('slow').addClass('hidden');
            } else { 
                
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
         
    }

    return false;   
    
});
$('#grid').gridLayout('.box', {col_width: 370, min_cols: 2});
    // options - (values above are the defaults)
    // col_width: the width of each grid block
    // min_cols: the minimum number of cols on the page (reducing browser width below this will not decrease number of columns). Set to your largest block (3 = block spans 3 columns)
    
    
    // gridchange event fires when window resize forces a grid refresh
    $('#grid').bind( "gridchange", function(e){
        console.log('gridchange event fired');
    });
    
    // returns heights of each column
    console.log( 'gridLayout.info():', $('#grid').gridLayout.info() );

// this forces a redraw of grid

  $('body').gridLayout.refresh();


});

出于测试目的，我设置了一个页面 18735.webhosting7.1blu.de/test/

对于超链接，我深表歉意，但 stackoverflow 目前不允许我插入多个链接。

Answer 1

我突然想到有几件事我会尝试。绝对不能保证它们会起作用，但为了开始这一点，这里是:

这一行:

  $('body').gridLayout.refresh();

也许如果您在 ul#navigation 事件处理程序中调用它，它会重建网格？试试这个:

$(document).ready(function(){
    $('ul#navigation a').click(function() {
        $(this).css('outline','none');
        $('ul#navigation .current').removeClass('current');
        $(this).parent().addClass('current');
        var filterVal = $(this).text().toLowerCase().replace(' ','-');
        if(filterVal == 'all') {
            $('#grid li.hidden').fadeIn('slow').removeClass('hidden');
        } else {
            $('#grid .box').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('slow').addClass('hidden');
                } else { 
                    $(this).fadeIn('slow').removeClass('hidden');
                }
            });
        }
        $('body').gridLayout.refresh();
        return false;   
    });
});