砌体 - imagesLoaded - 不是功能

Question

Masonry和imagesLoaded应加载并正常工作。一个类似的网站已经被制作出来，并且它在那里正常工作。我不知道我的问题在哪里，所以我希望你可能会看到问题。应该有一些缺失。

在Chrome中检查我得到以下错误：

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

通过什么我明白这意味着.imagesLoaded和Masonry应装入正确吗？否则我会收到错误$container.imagesLoaded is not a function？

我已经试过

• 察看jQuery的2.1.4.min.js正确装入
• 更改时，jQuery是加载
• 网上搜索
• 的顺序在jquery中搜索错误

头

<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> 

页脚

<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

Answer 1

看起来你有一个Javascript冲突。要解决这个问题，你可以把jQuery放入非冲突模式。查看jQuery noConflict函数。

那么试试这个：

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'); 
}); 
});