Question

我已经设置了Masonry（http://masonry.desandro.com/）来显示包含文字和图片的内容网格。

部分图片来自Dribble，通过jribbble jquery插件（http://lab.tylergaw.com/jribbble/）从Dribbble API获取

我需要使用imagesLoaded（http://desandro.github.io/imagesloaded/）来检测何时加载Dribbble图像，然后在加载所有图像后再次布局砌体，以避免重叠网格项目是由初始砌体后改变大小的图像引起的布局。

问题：在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'
        });
    });
});

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

Answer 1

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

//创建准备砌体网格的功能

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

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

1 个答案: