如何结合 jribbble.js 和 masonry.js 使用 imagesLoaded.js答案

【问题标题】：How to use imagesLoaded.js in conjunction with jribbble.js and masonry.js如何结合 jribbble.js 和 masonry.js 使用 imagesLoaded.js
【发布时间】：2013-12-10 16:59:20
【问题描述】：

我已设置 Masonry (http://masonry.desandro.com/) 以显示包含文本和图像的内容网格。

一些图片是来自 Dribbble 的镜头，这些图片是通过 jribbble jquery 插件 (http://lab.tylergaw.com/jribbble/) 从 Dribbble API 获取的

我需要使用 imagesLoaded (http://desandro.github.io/imagesloaded/) 来检测 Dribbble 图像何时加载，然后在所有图像加载后再次布局 Masonry，以避免在初始 Masonry 布局后更改大小的图像导致重叠网格项。

问题：加载 Jribbble 图像后，砌体不再自行布置，使砌体网格出现重叠图像。

我已经按顺序导入了 Jquery、imagesLoaded、Masonry 和 Jribbble。这是我在插件之后导入的 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'
        });
    });
});

任何帮助都会很棒，谢谢！

【问题讨论】：

标签： javascript jquery html api jquery-masonry

【解决方案1】：

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

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

function loadGrid() { masonry.... }

// 为 jribbble 创建函数以在回调中加载数据，然后运行您的 loadGrid 砌体函数

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

// 调用 jribbble

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

【讨论】：