爲什麼同位素js插件將元素推入1列？

Question

我有一個3列網格佈局，有幾行跨越完整3列。並使用imagesLoaded插件im加載圖像。然而，同位素將所有內容都推送到1列中，並且查看源代碼顯示每個項目已經離開：0px。

下面是我的HTML，CSS和JS的任何線索在這個問題上的片段？

HTML：

<div id="feature-work" class="clearfix"> 
         <figure class="websites wide-feature"><a href="#"> 
          <img src="http://html5doctor.com/wp-content/uploads/2010/03/macaque.jpg" alt="Monkey!" > 
          <figcaption>1. Macaque</figcaption> 
         </a></figure> 

         <figure class="websites tall-feature"><a href="#"> 
          <img src="http://html5doctor.com/wp-content/uploads/2010/03/kookaburra.jpg" alt="Monkey!" > 
          <figcaption>2. Kookaburra</figcaption> 
         </a></figure> 



CSS: 

    #feature-work { 
     margin:0 auto; 
     width:960px; 
    } 

    #feature-work figure { 

     position:relative; 
     float:left; 
     overflow:hidden; 
     margin:10px; 
     padding:0; 
     width:298px; 
     height:298px; 
     border:1px solid #ccc; 
    } 

    #feature-work figure img { 
     float:left; 
     width:100%; 
     height:218px; 
     overflow:hidden; 
    } 

JS

$container = $('#feature-work');  

    $container.imagesLoaded(function(){ 


      $container.isotope({ 
       itemSelector : 'figure', 
       layoutMode: 'masonry' 

      }); 

}); 

Answer 1

可能明顯一些，但如果你的第一個項目是不是你的「默認」它的大小與同位素的計算弄亂較大，所以你需要明確設置layoutMode和columnWidth。接下來的「陷阱」是它看起來像columnWidth使用元素outerWidth，即包括邊距！

$ container = $（'＃feature-work'）; $ container.imagesLoaded（函數（）{

$container.isotope({ 
     itemSelector : 'figure', 
     layoutMode:'masonry', 
     masonry:{ 
      columnWidth: 320 
     }  
    }); 

}）;