jquery.gridLayout +フィルタリング可能なdivボックス - >頼りにならない

Question

ねえ、私はドイツからですので、私の悪いenglshのスキルのために私を判断しないでください。 私は他のコミュニティにこの質問を掲載しましたが、誰も助けてくれませんでした。だから私はここで最高のために願っています。 私はjscriptプロなど何もありません。私はちょうど一緒にものを入れて、それが動作することを願っ ここに私がしたことがあります。私はnettuts +チュートリアルを"filterable portfolio"のものについて取り上げ、jquery-plugin "jQuery.gridLayout"（phase-change.org/jquery.gridlayout/）を追加しました。 Divsがグリッド上でソートされ、カテゴリのリンクをクリックすると、それらのosmeが消えます。しかし、彼らは消えた後、頼りになるはずです。今、箱はその場所にとどまっていて、場所全体に巨大な空白が残っています。

私のjavascriptの呼び出しは、私はハイパーリンクの 18735.webhosting7.1blu.de/test/

イム申し訳ありませんページを設定し、テスト目的のために、この

$(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(); 


}); 

のように見えますが、文句を言わない聞かせてStackOverflowの私は今のところ1つ以上を挿入します。

Answer 1

私の頭の上には、私が試してみたいことがいくつかあります。そこに彼らが動作する全く保証はありませんが、ここではこれをオフに開始のために行く：

このライン：

あなた ul#navigationイベントハンドラ内では、グリッドを再構築することを呼び出すたぶん場合

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

？これを試してください：

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