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

如果绝对是为单个项目添加内联样式，但是layoutComplete不会被触发。有没有诀窍，或者我发现了一个错误？

Answer 1

我不太清楚为什么我的代码不起作用，虽然我怀疑在初始化砌体和附加onLayoutComplete事件之间，它已经被解雇了。回到一个vanilla JS方法并在调用layout方法之前附加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();
});

Answer 2

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

当jQuery Masonry只定位一个项目时如何检测layoutComplete？

2 个答案: