使用jQuery砌體很多次在同一個網站

Question

我想在同一個網站上使用jQuery砌體3次。每個代碼塊獨立工作，但是當試圖一次使用全部3個時，只有最後一個工作。我怎樣才能將這些工作結合起來，並保持不同的值和選擇器？

/** First Instance **/ 
    var $container = $('.smallcolwrap'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.smallcol', 
      columnWidth: function(containerWidth) { 
       return containerWidth/3; }, 
      isAnimated: true 
      }); 
     }); 

    /** Second Instance **/ 
    var $container = $('.slickr-flickr-gallery'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : 'li', 
      columnWidth: 160, 
      isAnimated: true 
      }); 
     }); 

    /** Third Instance **/ 
    var $container = $('.navigationHome'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : 'li', 
      columnWidth: function(containerWidth) { 
       return containerWidth/2; }, 
      isAnimated: true, 
       animationOptions: { 
       duration: 250, 
       easing: 'linear', 
       queue: false 
       } 
      }); 
     }); 

Answer 1

哇，謝謝Kevin。我不是JS專家，但這很容易。這是在盯着太久之後發生的事情。

/** First Instance **/ 
var $container = $('.smallcolwrap'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.smallcol', 
     columnWidth: function(containerWidth) { 
      return containerWidth/3; }, 
     isAnimated: true 
     }); 
    }); 

/** Second Instance **/ 
var $container1 = $('.slickr-flickr-gallery'); 
    $container1.imagesLoaded(function(){ 
     $container1.masonry({ 
     itemSelector : 'li', 
     columnWidth: 160, 
     isAnimated: true 
     }); 
    }); 

/** Third Instance **/ 
var $container2 = $('.navigationHome'); 
    $container2.imagesLoaded(function(){ 
     $container2.masonry({ 
     itemSelector : 'li', 
     columnWidth: function(containerWidth) { 
      return containerWidth/2; }, 
     isAnimated: true, 
      animationOptions: { 
      duration: 250, 
      easing: 'linear', 
      queue: false 
      } 
     }); 
    });