砌体-imagesLoaded-没有功能

问题描述

Masonry和imagesLoaded应该被加载并正常工作.已经建立了一个类似的站点，并且在那里可以正常工作.我不知道我的问题在哪里，所以我希望你可能会看到问题.应该缺少一些东西.

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.

在Chrome Inspect中，出现以下错误:

In Chrome Inspect I get the following error:

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

据我所知，这意味着应该正确加载.imagesLoaded和Masonry?否则我会收到错误$container.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 ?

我尝试过的事情

• 检查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>

可在此处找到该页面.

工作的类似页面

推荐答案

似乎您有Java脚本冲突.要解决此问题，您可以将jQuery置于无冲突模式.查看jQuery noConflict 函数.

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.

因此，请尝试:

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

这篇关于砌体-imagesLoaded-没有功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！