当jQuery仅定位一个项目时，如何检测layoutComplete？

我用砖石来布置许多文章，一开始把所有的东西都藏起来，然后在布置时把物品暴露出来。当定位多个项目时，此功能按计划工作，但当存在一个项目时，布局仍处于隐藏状态。我也在使用Modernizer（见下面的sass）

这是我的密码：

CSS（SASS）：

.js-masonry, [data-masonry-options] {

    @include media-query(lap-and-up) {

        html.js & {
            visibility: hidden;
        }

        html.js &.masonry-loaded {
            visibility: visible;
        }
    }
}

var $container = $('.js-masonry').masonry();

$container.imagesLoaded( function() {

    $container.masonry({
        "columnWidth": ".grid-sizer",
        "gutter": ".gutter-sizer",
        "itemSelector": ".item",
        "percentPosition": true
    });

    $container.masonry('on', 'layoutComplete', function() {
        $container.addClass('masonry-loaded');
    });
});

Javascript:

.js-masonry, [data-masonry-options] {

    @include media-query(lap-and-up) {

        html.js & {
            visibility: hidden;
        }

        html.js &.masonry-loaded {
            visibility: visible;
        }
    }
}

var $container = $('.js-masonry').masonry();

$container.imagesLoaded( function() {

    $container.masonry({
        "columnWidth": ".grid-sizer",
        "gutter": ".gutter-sizer",
        "itemSelector": ".item",
        "percentPosition": true
    });

    $container.masonry('on', 'layoutComplete', function() {
        $container.addClass('masonry-loaded');
    });
});

---

如果确实要向单个项目添加内联样式，但layoutComplete没有触发，则为“砌石”。这有什么诀窍吗，或者我发现了一个bug吗？

无法测试这个问题，但尝试在imagesloaded之外调用layoutcomplete

var $container = $('.js-masonry').masonry();

$container.imagesLoaded( function() {

$container.masonry({
    "columnWidth": ".grid-sizer",
    "gutter": ".gutter-sizer",
    "itemSelector": ".item",
    "percentPosition": true
});


});
$container.masonry('on', 'layoutComplete', function() {
    $container.addClass('masonry-loaded');
});

---

我不太清楚为什么我的代码不起作用，尽管我怀疑在初始化砌体和附加onLayoutComplete事件之间，它已经被触发了。回到普通的JS方法，在调用布局方法之前附加layoutComplete，为我解决了这个问题

var container = document.querySelector('.js-masonry');

var msnry = new Masonry( container, {
    "columnWidth": ".grid-sizer",
    "gutter": ".gutter-sizer",
    "itemSelector": ".item",
    "percentPosition": true
});

msnry.on('layoutComplete', function(laidOutItems) {
    container.className = 'masonry-loaded';
});

imagesLoaded( container, function() {
    msnry.layout();
});

---

太近了！我们无法将layoutComplete事件附加到imagesLoaded之外，因为砌体尚未初始化。我决定回退到一个普通的js方法，它成功了。请参阅我的答案以获得解决方案。