jQuery Masonry 사용 동일한 사이트에서 여러 번 사용

Question

동일한 사이트에서 jQuery 벽돌을 세 번 사용하려고합니다. 각 코드 블록은 독립적으로 작동하지만 한 번에 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

와우, 감사합니다. 케빈. 저는 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 
      } 
     }); 
    });