Question

我在页面加载时遇到砌砖图像重叠的问题。为了使图像布局正确，我尝试添加此代码，但仍然无法正常工作并出现错误：未捕获TypeError：$ 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

你有很多问题。

您的砌体代码不在脚本标记内
您在代码中使用了砌体和同位素。 Isotope.js有一个砌体布局，但它不是masonry.js。它们不是一起使用的。（无论如何，你还没有装载isotope.js。）砌体不过滤物品，只过滤同位素。选择一个使用并使用代码
您在masonry.js之后加载imagesloaded.js，但是您在代码中的砌体之前调用了imagesloaded函数。
您在jquery.js之前加载masonry.js但是您正在使用jquery来加载砌体。
您有2个名为$ container
的变量
var $ container = $（＆＃39; .masonry_wrapper＆＃39;）

var $ container = $（＆＃34;＃container＆＃34;）;

这是至少加载砌体的基本代码设置：

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

你的代码的其余部分是同位素。

未捕获的TypeError：$ container.masonry不是函数

1 个答案: