CODEWITHSUNDEEP
jqueryjquery-masonry
Aaron Silber
Aaron Silber

Reputation: 483

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

I'm using Masonry to layout a number of articles, hiding everything at first and revealing items when layoutComplete fires. This works as planned when there are more than one article being positioned, but when one one is present, the layout remains hidden. I'm using Modernizr as well (seen in sass below).

Here's my code:

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 if definitely adding inline styles to the single item, but layoutComplete isn't firing. Is there a trick to this, or have I discovered a bug?

Upvotes: 1

Views: 813

Answers (2)

Aaron Silber
Aaron Silber

Reputation: 483

I'm not quite sure why my code wasn't working, though I suspect that between initializing masonry and attaching the onLayoutComplete event, it had already been fired. Falling back to a vanilla JS approach and attaching layoutComplete before calling the layout method fixed this issue for me.

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

Upvotes: 1

Macsupport
Macsupport

Reputation: 5444

Not able to test this but try calling layoutcomplete outside of imagesloaded.

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

Upvotes: 0

Related Questions