jQuery Isotope/Masonary Gutter問題

Question

我正在使用jQuery Isotope。這是一個很棒的插件，但我在砌體模式下調整項目時遇到了一些問題。我的容器寬960像素，我的目標是讓4個項目完美排列，就好像它使用的是960像素的網格系統。所以，左邊和右邊都會碰到容器的邊緣。這裏是它的外觀在目前的屏幕截圖：

我的代碼，目前像這樣：

JS：

$('#container').isotope({ 
    itemSelector : '.item', 
     masonry : { 
      columnWidth : 240, 
      gutterWidth: 10 
     } 
}); 

CSS：

.item{ 
width:230px; 
background:red; 
overflow: hidden; 
} 

HTML：

<div class="item">a</div> 

到目前爲止，我已經成功地得到它的工作的唯一方法是設置寬度爲240px，但再有就是項目之間沒有間隙。

編輯

下面是一個小提琴顯示我有什麼http://jsfiddle.net/qGJhe/

Answer 1

根據您的jsfiddle（http://jsfiddle.net/qGJhe/），我加了背景顏色容器檢查您遇到的問題額外的差距，但它沒有顯示出額外的差距。

此外，由於佈局是響應式的，因此它不符合960像素的寬度。所以在我看來，你沒有複製完全相同的代碼（HTML，CSS，jQuery），你在你的實際頁面上。

無論如何，我禁用了響應代碼位以使其符合固定的960px寬度，並且看到了10px的額外間隙。 http://jsfiddle.net/shodaburp/qGJhe/3/

這讓我意識到，您對水槽尺寸的計算以及元素的寬度都是相當不準確的。

元素寬度爲240像素，根本不會給你排水溝的空間。http://jsfiddle.net/shodaburp/qGJhe/4/

gutterSize = (containerWidth - (elementWidth * numberOfElement)/numberOfGutters)

gutterSize = (960 - (240 * 4))/3) = 0

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (240 * 4) + (3 * 0) = 960

extraGap = containerWidth - totalWidth

extraGap = 960 - 960 = 0

230px加上排水溝大小的13 元素寬度會給你額外的差距1px的http://jsfiddle.net/shodaburp/qGJhe/5/

gutterSize = (containerWidth - (elementWidth * numberOfElement)/numberOfGutters)

gutterSize = (960 - (230 * 4))/3) = 13.33 = 13 (rounded)

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (230 * 4) + (3 * 13) = 959

extraGap = containerWidth - totalWidth

extraGap = 960 - 959 = 1

如果你想在一排4個元素，以很好地適應內960像素，那麼你需要減少元素的寬度爲225px，並具有20px的陰影大小。

元素寬度爲225px加上天溝大小爲20將是完美的！http://jsfiddle.net/shodaburp/qGJhe/6/

gutterSize = (containerWidth - (elementWidth * numberOfElement)/numberOfGutters)

gutterSize = (960 - (225 * 4))/3) = 20

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (225 * 4) + (3 * 20) = 960

extraGap = containerWidth - totalWidth

extraGap = 960 - 960 = 0

Answer 2

您已經添加修改後的佈局模式？使用gutterWidth不是標準選項。 docs say您需要添加演示頁面源代碼。

http://isotope.metafizzy.co/custom-layout-modes/masonry-gutters.html

// modified Isotope methods for gutters in masonry 
$.Isotope.prototype._getMasonryGutterColumns = function() { 
    var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0; 
     containerWidth = this.element.width(); 

    this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth || 
       // or use the size of the first item 
       this.$filteredAtoms.outerWidth(true) || 
       // if there's no items, use size of container 
       containerWidth; 

    this.masonry.columnWidth += gutter; 

    this.masonry.cols = Math.floor((containerWidth + gutter)/this.masonry.columnWidth); 
    this.masonry.cols = Math.max(this.masonry.cols, 1); 
};