Masonry - imagesLoaded - Not a function

问题:

Masonry and imagesLoaded should be loaded and work correctly. A similar site has been made, and there it works correctly. I have no idea where my problem is, so I am hoping that you maybe see the problem. There should be something missing.

In Chrome Inspect I get the following error:

Uncaught TypeError: $(...).imagesLoaded is not a function 

By what I have understood this means that .imagesLoaded and Masonry should be correctly loaded? Else I would have recieved the error $container.imagesLoaded is not a function ?

What I have tried

• Checking if jquery-2.1.4.min.js is properly loaded
• Changing the order of when the jquery is loaded
• Searching online
• Searching for errors within the jquery

Header

<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script> <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script> <?php wp_head(); ?> 

HTML

<div class="container">     <div id="masonry-container" class="row nomargin">          <div class="col-md-9">               <div class="item col-lg-4 col-md-4 col-sm-4">                    <!--- Content --->               </div>               <div class="item col-lg-4 col-md-4 col-sm-4">                    <!--- Content --->               </div>               <div class="item col-lg-4 col-md-4 col-sm-4">                    <!--- Content --->               </div>          </div>          <div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12">               <!--- Content --->          </div>     </div> </div> 

Footer

<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/masonry.pkgd.min.js"></script> <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/imagesloaded.js"></script>  <script>   $('#masonry-container').imagesLoaded( function(){     $('#masonry-container').masonry({      itemSelector: '.item',      isAnimated: true,      isFitWidth: true     });   }); $(window).resize(function() {     $('#masonry-container').masonry({         itemSelector: '.item',         isAnimated: true     }, 'reload'); }); </script> 

The page can be found here.

A similar page where it works

回答1:

It seems that you have a Javascript conflict. To solve this issue you can putting jQuery Into No-Conflict Mode. Check out the jQuery noConflict function.

So try this :

jQuery.noConflict(); jQuery( document ).ready(function( $ ) {  $('#masonry-container').imagesLoaded( function(){     $('#masonry-container').masonry({         itemSelector: '.item',         isAnimated: true,         isFitWidth: true     });  });   $(window).resize(function() {     $('#masonry-container').masonry({         itemSelector: '.item',         isAnimated: true     }, 'reload');  }); }); 

文章来源: Masonry - imagesLoaded - Not a function