セット高さ付きの石積み

Question

私はいくつかの点で石工を使用しましたが、私の目には高さが設定されている（またはする必要がない）新しい効果を試してみたかったのです。これは私が取得しようとしている効果である：

私はそれについて行ってきた方法は、水平方向と垂直方向と呼ばれる2つの追加クラス、高さの異なるそれぞれを追加することです。それは大丈夫と思われる。私が抱えている問題は、それが石工の効果をもたらしていないということです。私は、これまでに持っていたものとマークアップ/ jqueryのマッチングするコードを以下にリンクしました。

https://codepen.io/amymatrix/pen/wrBYPK

HTML

<section class="grid masonry"> 
    <div class="grid-sizer"></div> 
     <div class="grid-item gallery horizontal"> 
      <div class="gallery-style"></div> 
     </div> 
     <div class="grid-item gallery horizontal"> 
      <div class="gallery-style"></div> 
     </div> 
     <div class="grid-item gallery vertical"> 
      <div class="gallery-style"></div> 
     </div> 
     <div class="grid-item gallery horizontal"> 
      <div class="gallery-style"></div> 
     </div> 
    </div> 
</section> 

jQueryの

$('.masonry').masonry({ 
    itemSelector: '.grid-item', 
}); 

SCSS

.grid-item { 
    float: left; 
    width: 33.33%; 
} 

.gallery { 
    &.horizontal { 
     .gallery-style { height: 350px } 
    } 
    &.vertical { 
     .gallery-style { height: 700px } 
    } 
} 

私の問題は、白のギャップは2枚のトップの画像の下に表示されています右側の垂直な1つのためです。理想的には、4番目と5番目のイメージが揺れ動いてその場所を取るのが好きです。

ギャップを防ぐ方法はありますか？あるいは、これをやり遂げることができる別の方法？あなたの例では、良いです

Answer 1

問題は、あなただけの `という名前の石工を持つ属性があり、あなたのhtmlのに

<script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script>