为什么同位素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 
     }  
    }); 

}）;