砌體高度的砌體

我已經使用砌體的幾件事情，但想嘗試一個新的效果，在我的眼睛涉及設置的高度（或可能不需要）。這是我想要得到的效果：砌體高度的砌體

的方式我已經走了它是添加2個額外的類稱爲水平和垂直的，各有不同的高度。這似乎是好的。我遇到的問題是它沒有產生磚石效應。我已經將一個codepen鏈接到了我目前爲止和標記/ jquery匹配的地方。

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 } 
    } 
}

我的問題是在這兩個頂部圖像出現的白色差距由於垂直的一個在右邊。我理想地喜歡第四和第五張圖像，以便拍攝並拍攝那個點。

有沒有辦法來防止這種差距？或者我可以採取另一種方式來做到這一點？

來源

2017-09-14 Amy

的存在與磚石命名的屬性'溝槽'你可以設置瓷磚之間的差距。 –

我試圖刪除所有的差距，而不是創建一個。 – Amy

你可以設置'gutter：0px'來刪除。 –

你舉的例子是好的問題是你沒有打電話jQuery的 codepen

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

只是在添加了jQuery的HTML

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

來源

2017-09-14 12:46:51

我有一箇舊版本的jQuery加載，我將它改爲上面的並且完美地工作。謝謝！ :) – Amy

砌體高度的砌體

回答

相關問題