0

Masonry ( http://masonry.desandro.com/ ) をセットアップして、テキストと画像を含むコンテンツのグリッドを表示しました。

一部の画像は、jribbble jquery プラグイン ( http://lab.tylergaw.com/jribbble/ )を介して Dribbble API からフェッチされている Dribble からのショットです。

imagesLoaded ( http://desandro.github.io/imagesloaded/ ) を使用して、Dribbble 画像がいつ読み込まれたかを検出し、すべての画像が読み込まれた後に Masonry を再度レイアウトして、画像のサイズが変更されたためにグリッド項目が重ならないようにする必要があります。最初の組積造レイアウトの後。

問題: Jribbble 画像がロードされた後、Masonry が再配置されず、Masonry グリッドに重複する画像が残ります。

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

どんな助けでも素晴らしいでしょう、ありがとう!

4

1 に答える 1

0

データがロードされたら、jribbble コールバック関数を使用して石積みグリッドをロードします。これは非常に簡単ですが、私にとってはうまくいきます：

// 組積造グリッドを準備する関数を作成します

function loadGrid() { masonry.... }

// コールバックでデータをロードする jribbble の関数を作成し、loadGrid masonry 関数を実行します

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

// jribbble を呼び出す

    $.jribbble.getShotsByPlayerId(playername, callback, {page: 1, per_page: 15})
于 2013-12-06T13:30:09.987 に答える