砌体高度的砌体

我已经使用砌体的几件事情，但想尝试一个新的效果，在我的眼睛涉及设置的高度（或可能不需要）。这是我想要得到的效果：砌体高度的砌体

的方式我已经走了它是添加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

砌体高度的砌体

回答

相关问题