Masonry - 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 设置为 No-Conflict 模式。查看 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');
 });
});

Masonry - imagesLoaded - 不是函数

Masonry - imagesLoaded - Not a function

javascript

jquery

html

jquery-masonry

imagesloaded