Uncaught TypeError: $ container.maurry ist keine Funktion

Question

Ich habe ein Problem mit Mauerwerk Bilder überlappend, wenn die Seite geladen wird. Um die Bilder zu machen Layout richtig habe ich versucht, diesen Code hinzufügen, aber immer noch nicht funktioniert, und erhalte eine Fehlermeldung: Uncaught Typeerror: $ container.masonry ist keine Funktion

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script> 

    <script src="/js/jquery.js"></script> 

$(document).ready(function() { 
    var $container = $("#container"); 

    $container.imagesLoaded(function() { 
     $container.masonry(); 
    }); 
}); 


<script> 
     (function ($) { 
      var $container = $('.masonry_wrapper'), 
       colWidth = function() { 
        var w = $container.width(), 
         columnNum = 1, 
         columnWidth = 0; 
        if (w > 1200) { 
         columnNum = 4; 
        } else if (w > 900) { 
         columnNum = 4; 
        } else if (w > 600) { 
         columnNum = 2; 
        } else if (w > 300) { 
         columnNum = 1; 
        } 
        columnWidth = Math.floor(w/columnNum); 
        $container.find('.item').each(function() { 
         var $item = $(this), 
          multiplier_w = $item.attr('class').match(/item-w(\d)/), 
          multiplier_h = $item.attr('class').match(/item-h(\d)/), 
          width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4, 
          height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4; 
         $item.css({ 
          width: width, 
          height: height 
         }); 
        }); 
        return columnWidth; 
       } 

       function refreshWaypoints() { 
        setTimeout(function() { 
        }, 10200); 
       } 

       $('nav.portfolio-filter ul a').on('click', function() { 
        var selector = $(this).attr('data-filter'); 
        $container.isotope({ filter: selector }, refreshWaypoints()); 
        $('nav.portfolio-filter ul a').removeClass('active'); 
        $(this).addClass('active'); 
        return false; 
       }); 

       function setPortfolio() { 
        setColumns(); 
        $container.isotope('reLayout'); 
       } 

       isotope = function() { 
        $container.isotope({ 
         resizable: true, 
         itemSelector: '.item', 
         masonry: { 
          columnWidth: colWidth(), 
          gutterWidth: 0 
         } 
        }); 
       }; 
      isotope(); 
      $(window).smartresize(isotope); 
     }(jQuery)); 
    </script> 

Answer 1

Sie eine Reihe von Fragen haben.

1. Ihr Mauerwerk-Code ist nicht in einem Skript-Tag
2. Sie sind beide Mauerwerk und Isotop in Ihrem Code verwenden. Isotope.js hat ein Mauerwerk, ist aber kein Mauerwerk.js. Sie werden nicht zusammen verwendet. (Sie haben isotope.js trotzdem nicht geladen.) Mauerwerk filtert keine Gegenstände, nur Isotope. Wählen Sie einen aus und verwenden Sie den Code dafür
3. Ihr Laden imagesloads.js nach maurer.js, aber Sie rufen die Bilder geladene Funktion vor Mauerwerk in Ihrem Code.
4. Ihr Laden maurer.js vor jquery.js, aber Sie verwenden jquery, um Mauerwerk zu laden.

5. Sie haben 2-Variablen $ container

   var $ container = $ genannt ('masonry_wrapper.')

   var $ container = $ ("# Container");

ist hier ein Basiscode-Setup mindestens Lastmauerwerk:

<script src="/js/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script> 
<script> 
$(document).ready(function() { 
var $container = $("#container"); 
$container.imagesLoaded(function() { 
    $container.masonry(); 
}); 
}); 
</script> 

Der Rest des Codes ist für Isotop.