如何使用加載的圖像向同位素添加砌體選項

Question

我遇到了使用Jquery Isotope和圖像加載選項時未顯示適當數量的列的firefox和chrome問題。 Safari一直顯示3列。不過，Firefox和Chrome有時只顯示2.我的所有圖像都具有相同的寬度28.333％。我曾嘗試將其更改爲較低的號碼，但不影響任何內容。

這是我目前有：

$(document).ready(function() { 
var $container = $('#artContent'), 
filters = {}; 

$container.imagesLoaded(function(){ 
$container.isotope({ 
itemSelector : '.isotopeItem' 
}); 
}); 

我想這導致打破所有的jQuery

$(document).ready(function() { 
var $container = $('#artContent'), 
filters = {}; 

$container.imagesLoaded(function(){ 
$container.isotope({ 
itemSelector : '.isotopeItem', 
masonry: { columnWidth: 33.333% } 

}); 
}); 

任何人都有這個問題？或知道如何解決它。

Answer 1

如果您columnWidth中使用％，它需要像這樣（注意單引號）：

$(document).ready(function() { 
var $container = $('#artContent'), 
filters = {}; 

$container.imagesLoaded(function(){ 
$container.isotope({ 
itemSelector : '.isotopeItem', 
masonry: { columnWidth: '33.333%' } 

}); 
});