如何将imagesLoaded.js与jribbble.js和masonry.js结合使用

Question

I have set up Masonry ( http://masonry.desandro.com/ ) to display a grid of content that includes text and images.

Some of the images are shots from Dribble that are being fetched from the Dribbble API by way of the jribbble jquery plugin ( http://lab.tylergaw.com/jribbble/ )

I need to use imagesLoaded ( http://desandro.github.io/imagesloaded/ ) to detect when the Dribbble images are loaded and then layout Masonry again after all images have loaded to avoid overlapping grid items that are caused by images that change size after the initial Masonry layout.

The problem: Masonry is not laying itself out again after the Jribbble images load leaving the masonry grid with overlapping images.

I have imported Jquery, imagesLoaded, Masonry and Jribbble in that order. Here is my Jquery that I am importing after the plugins:

$(document).ready(function() {

/*------------------------------------*\
    Jribbble
\*------------------------------------*/
    $.jribbble.getShotsByPlayerId('88paulmurphy', function (playerShots) {

        var dribbbles = [];

        $.each(playerShots.shots, function (i, shot) {
            dribbbles.push('<a href="' + shot.url + '"><img src="' + shot.image_url + '" alt="' + shot.title + '" class="img--center"></a><header><h2>' + shot.title + '</h2><ul class="widget__tag-list"><li><span class="tag tag--dribbble"> Dribbble Shot</span></li></ul></header><footer class="widget__footer"><a href="' + shot.url + '" class="btn">View on Dribbble</a></footer>');
        });

        $('.js-dribbble').each(function(index){
            this.innerHTML = dribbbles[index];
        });

    }, {per_page: 6});


/*------------------------------------*\
    Masonry
\*------------------------------------*/
    var $container = $('.main').masonry();
    // layout Masonry again after all images have loaded
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector: '.widget',
            transitionDuration: '0.4s'
        });
    });
});

Any help would be great, thanks!

Answer 1

Use the jribbble Callback function to load the masonry grid once the data is loaded. This is very simple but it works for me:

// Create function to prepare masonry grid

function loadGrid() { masonry.... }

// Create function for jribbble to load the data on callback, then run your loadGrid masonry function

var callback = function (listDetails) {  load dribbble shots into object & call the masonry grid function }

// Call jribbble

    $.jribbble.getShotsByPlayerId(playername, callback, {page: 1, per_page: 15})