未捕获的类型错误:$container.masonry 不是一个函数

Question

页面加载时，我遇到了砖石图像重叠的问题。 为了使图像正确布局，我尝试添加此代码，但仍然不起作用并收到错误：未捕获的类型错误：$container.masonry不是一个函数

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
   <script src="/js/jquery.js"></script>
$(document).ready(function () {
    var $container = $("#container");
    $container.imagesLoaded(function () {
        $container.masonry();
    });
});

<script>
        (function ($) {
            var $container = $('.masonry_wrapper'),
                colWidth = function () {
                    var w = $container.width(), 
                        columnNum = 1,
                        columnWidth = 0;
                    if (w > 1200) {
                        columnNum  = 4;
                    } else if (w > 900) {
                        columnNum  = 4;
                    } else if (w > 600) {
                        columnNum  = 2;
                    } else if (w > 300) {
                        columnNum  = 1;
                    }
                    columnWidth = Math.floor(w/columnNum);
                    $container.find('.item').each(function() {
                        var $item = $(this),
                            multiplier_w = $item.attr('class').match(/item-w(d)/),
                            multiplier_h = $item.attr('class').match(/item-h(d)/),
                            width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                            height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
                        $item.css({
                            width: width,
                            height: height
                        });
                    });
                    return columnWidth;
                }
                function refreshWaypoints() {
                    setTimeout(function() {
                    }, 10200);   
                }
                $('nav.portfolio-filter ul a').on('click', function() {
                    var selector = $(this).attr('data-filter');
                    $container.isotope({ filter: selector }, refreshWaypoints());
                    $('nav.portfolio-filter ul a').removeClass('active');
                    $(this).addClass('active');
                    return false;
                });
                function setPortfolio() { 
                    setColumns();
                    $container.isotope('reLayout');
                }
                isotope = function () {
                    $container.isotope({
                        resizable: true,
                        itemSelector: '.item',
                        masonry: {
                            columnWidth: colWidth(),
                            gutterWidth: 0
                        }
                    });
                };
            isotope();
            $(window).smartresize(isotope);
        }(jQuery));
    </script>

Answer 1

您有很多问题。

1. 您的砌体代码不在脚本标记中
2. 您在代码中同时使用砖石和同位素。同位素.js有砖石布局，但它不是砖石.js。它们不一起使用。（无论如何.js你还没有加载同位素。砌体不过滤物品，只过滤同位素。选择一个要使用的代码并使用其代码
3. 加载图像加载.js在砌体之后.js但您在代码中的砌体之前调用 imagesloaded 函数。
您的加载砌体.js在 jquery
4. 之前.js但您正在使用 jquery 加载砌体。

5. 您有 2 个变量称为 $container

   var $container = $（'.masonry_wrapper'）

   var $container = $（"#container"）;

这是至少加载砖石的基本代码设置：

<script src="/js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
<script>
$(document).ready(function () {
var $container = $("#container");
$container.imagesLoaded(function () {
    $container.masonry();
});
});
</script>

其余代码是针对同位素的。