jQuery砌體和邊距權利

Question

我有兩列連續，第一列有保證金權利，而第二列沒有。我想用jQuery Masonry去除空的空間。然而，保證金的權利似乎沒有與砌體工作。

如何保持相同的框寬度並刪除行中第二個框之後的邊距？

這裏的HTML：

<div class="list"> 

    <div class="item"></div> 
    <div class="item no-margin"></div> 

    <div class="item"></div> 
    <div class="item no-margin"></div> 

    <div class="item"></div> 
    <div class="item no-margin"></div> 
</div> 

CSS：

.list{ 
    width: 350px; 
    border: 1px solid red; 
    overflow: hidden; 
} 

.item{ 
    width: 150px; 
    height: 150px; 
    background: green; 
    margin-right: 50px; 
    margin-bottom: 50px; 
    float: left; 
} 

.no-margin{ 
    margin-right: 0 !important; 

} 

的jQuery：

jQuery('.list').masonry({ 
     itemSelector: '.item', 
}); 

演示： http://jsfiddle.net/Y7USd/

Answer 1

jQuery砌體有一個選項gutterWidth。您應該使用它在元素之間創建額外的邊距/間距。

在你的小提琴中，你也錯過了包括modernizr-transitions.js。

下面是一個工作示例：http://jsfiddle.net/shodaburp/T3FLr/