石積みのレイアウトがフィルタリングされたときに空き領域を埋めない

Question

クリック時にフィルタリングされる石積みのレイアウトを作成しました。

何らかの理由で、ボタンのいくつかが選択されている場合、石積みレイアウトは左に浮動し、コンテナを塗りつぶす代わりに、すべてのアイテムを重ねて積み重ねます。

$grid.isotope({ layoutMode: 'masonry' }) 

石工がこのlayoutModeが組み込まれているようには見えないし、私はこのプロジェクトのための同位体を使用することはできません：私は同位体の上にそれがで結構です、なぜこれが起こっているかわかりません。 http://codepen.io/H0BB5/pen/ORVBzm

レイアウトが「ビューのすべて」と「おめでとうございます」ではなく「ありがとう」のために完全である：私は間違っているつもりどこ

が、私はわからないんだけど、ここにcodepenです。

編集： は、私は、最初の2つのグリッド項目のHTMLには「おめでとうございます」クラスを持っているので、「おめでとうございます」は、スペースを埋めるの原因があることに気づきました。これはどういうわけか、縦方向ではなく横方向にレイアウトを強制する必要があります。まだ解決策が見つかりませんでした。

Answer 1

私は問題を見つけ出しました。 他の誰かが同じ問題を抱えている場合は、そのドキュメントをさらに読んで解決策を見つけました。 http://codepen.io/H0BB5/pen/ORVBzm

：

<div class="grid"> 
    <!-- .grid-sizer empty element, only used for element sizing --> 
    <div class="grid-sizer"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item grid-item--width2"></div> 
    ... 
</div> 

/* fluid 5 columns */ 
.grid-sizer, 
.grid-item { width: 20%; } 
/* 2 columns wide */ 
.grid-item--width2 { width: 40%; } 
// use outer width of grid-sizer for columnWidth 
columnWidth: '.grid-sizer', 
itemSelector: '.grid-item', 
percentPosition: true 

は今ペンを作業します