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