javascript - 未捕获的 TypeError : $container. masonry 不是函数

Question

页面加载时，我遇到了砖石图像重叠的问题。为了使图像布局正确，我尝试添加此代码，但仍然无法工作并收到错误: Uncaught TypeError: $container.masonry is not a function

<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. 您的 masonry 代码不在脚本标记内
2. 您在代码中同时使用了 masonry 和同位素。 Isotope.js 有砖石布局，但它不是 masonry.js。它们不一起使用。 (无论如何，您还没有加载 isotope.js。)Masonry 不会过滤项目，只会过滤同位素。选择一个来使用并使用它的代码
3. 您在 masonry.js 之后加载 imagesloaded.js，但在代码中的 masonry 之前调用 imagesloaded 函数。
4. 您在 jquery.js 之前加载 masonry.js，但您正在使用 jquery 加载 masonry。

5. 您有 2 个名为 $container 的变量

   var $container = $('.masonry_wrapper')

   var $container = $("#container");

这是至少加载 masonry 的基本代码设置:

<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>

其余代码用于同位素。