jquery.gridLayout +可过滤的div盒子 - >不诉诸

Question

嘿伙计们，我来自德国，所以请不要评判我的坏英文技能。 我在其他社区发布了这个问题，但没有人能帮上忙。所以我只希望在这里最好。 我不是一个jscript专业版或任何东西。我只是把东西放在一起，并希望它的作品。 所以这就是我所做的。我把教程从NETTUTS +对"filterable portfolio"的东西，增加了jQuery的插件“jQuery.gridLayout”（phase-change.org/jquery.gridlayout/）一切工作正常。 Divs在网格上得到排序，当我点击一个category-link时，它们消失。但是他们应该在他们消失之后诉诸手段。现在这些盒子都停留在他们的位置上，在整个地方留下了巨大的空白空间。

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