Javascript 在同一站点中多次使用jQuery砌体

Javascript 在同一站点中多次使用jQuery砌体,javascript,jquery,Javascript,Jquery,我尝试在同一个站点上使用jQuery砌体3次。每个代码块独立工作,但当试图同时使用所有3个代码块时,只有最后一个代码块工作。我如何将它们结合起来工作,同时保持每个值和选择器的不同 /** First Instance **/ var $container = $('.smallcolwrap'); $container.imagesLoaded(function(){ $container.masonry({ itemSelec

我尝试在同一个站点上使用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
                }
          });
        }); 

哇,谢谢你,凯文。我不是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
            }
      });
    }); 

为每个
var$container
变量指定一个唯一的名称,否则每个变量都将覆盖上一个变量。