0

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

1 回答 1

3

你有很多问题。

  1. 您的砌体代码不在脚本标签内
  2. 您在代码中同时使用砖石和同位素。Isotope.js 有一个砌体布局，但它不是 masonry.js。它们不一起使用。（反正你还没有加载 isotope.js。） Masonry 不过滤项目，只过滤同位素。选择一个使用并使用它的代码
  3. 您在 masonry.js 之后加载 imagesloaded.js 但您在代码中的 masonry 之前调用 imagesloaded 函数。
  4. 您在 jquery.js 之前加载 masonry.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>

您的其余代码用于同位素。

于 2016-05-21T22:36:04.677 回答