jQuery Masonry 仅定位一项时如何检测 layoutComplete？

Question

我正在使用 Masonry 对许多文章进行布局，首先隐藏所有内容，并在触发 layoutComplete 时显示项目。当有不止一篇文章被定位时，这会按计划工作，但当有一篇文章存在时，布局将保持隐藏状态。我也在使用 Modernizr（参见下面的 sass）。

这是我的代码：

CSS (SASS):

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

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

        html.js & {
            visibility: hidden;
        }

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

Javascript:

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');
    });
});

Masonry 如果确实向单个项目添加内联样式，但 layoutComplete 未触发。这有什么技巧吗，还是我发现了一个错误？

Answer 1

无法对此进行测试，但请尝试在 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');
});

Answer 2

我不太清楚为什么我的代码不起作用，但我怀疑在初始化砌体和附加 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();
});

jQuery Masonry 仅定位一项时如何检测 layoutComplete？

How to detect layoutComplete when jQuery Masonry only positions one item?

jquery

jquery-masonry