jribbble.js 및 masonry.js와 함께 imagesLoaded.js를 사용하는 방법

Question

텍스트 및 이미지가 포함 된 그리드를 표시하도록 Masonry (http://masonry.desandro.com/)를 설정했습니다.

이미지 중 일부는 jribbble jQuery 플러그인의 방법에 의해 Dribbble API에서 반입되고 드리블에서 샷 (http://lab.tylergaw.com/jribbble/)

내가 Dribbble 이미지를로드 할 때 감지하는 imagesLoaded (http://desandro.github.io/imagesloaded/)를 사용할 필요가 있습니다 초기 벽돌 레이아웃 이후에 크기가 변하는 이미지로 인해 눈금이 겹치지 않도록 모든 이미지가로드 된 후 다시 벽돌을 배치하십시오.

문제 : 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 콜백 함수를 사용하면 데이터가로드 된 후 벽돌 그리드를로드 할 수 있습니다. 이것은 매우 간단하지만 나를 위해 작동합니다

가 // 벽돌 그리드를 준비하는 함수를 만듭니다

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