Masonry并imagesLoaded应正确加载并正常工作。已经建立了类似的站点，并且在那里可以正常工作。我不知道我的问题在哪里，所以我希望你可能会看到问题。应该缺少一些东西。
在Chrome Inspect中，出现以下错误：
Uncaught TypeError: $(...).imagesLoaded is not a function
通过什么我已经明白这意味着，.imagesLoaded和Masonry应装入正确吗？否则我会收到该错误$container.imagesLoaded is not a function？
我尝试过的
标头
<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>
看来您有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');
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句