Javascript 如何将imagesLoaded.js与jribble.js和massy.js结合使用

我已经设置了massy（）来显示包含文本和图像的内容网格

其中一些图像是通过jribble jquery插件（）从Dribble API获取的Dribble快照

我需要使用imagesLoaded（）来检测何时加载可滴图像，然后在加载所有图像后再次布局砖石，以避免由于图像在初始砖石布局后改变大小而导致网格项重叠

问题是：JRIbble图像加载后，砌体没有再次进行布局，从而使砌体网格中的图像重叠

我按照这个顺序导入了Jquery、imagesLoaded、Mashine和Jribble。以下是我在插件之后导入的Jquery：

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

$（文档）.ready（函数（）{
/*------------------------------------*\
jribble
\*------------------------------------*/
$.jribble.getShotsByPlayerId（'88paulmurphy'，函数（玩家）{
var运球=[]；
$.each（playerShots.shots，函数（i，shot）{
运球。推（“”+shot.title+”
运球投篮
）；
});
$（'.js dribble'）。每个（函数（索引）{
this.innerHTML=dribbles[index]；
});
}，{每页6}）；
/*------------------------------------*\
砖石建筑
\*------------------------------------*/
var$container=$（'.main'）.mashine（）；
//加载所有图像后再次布局砌体
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.widget”，
过渡持续时间：“0.4s”
});
});
});

---

任何帮助都会很好，谢谢

加载数据后，使用jribble回调函数加载砌体网格。这很简单，但对我来说很有效：

//创建用于准备砌体网格的函数

function loadGrid() { masonry.... }

//为jribble创建函数以在回调时加载数据，然后运行loadGrid函数

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

//调用jribble

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