4

Masonry と Ajax を使用して Wordpress にアイテムを追加すると、別の画像オーバーラップの問題が発生します。最初に複数のアイテムが追加されると、画像が重なります。ただし、ページをリロードすると、画像が重ならなくなります。いくつかの調査を行った後、これは画像の高さの計算に関係していることに気付きました。

Masonry Web サイトのヘルプ ページから、イメージの幅と高さを指定するためにgetimagesize関数を使用することが提案されています。

しかし、これは私が立ち往生しているところです。PHP に関する知識が限られているため、この関数をどのように利用するか、コード内のどこに配置すればよいかわかりません。そのため、ここで少し方向性を探しています。getimagesize関数をコードに統合する方法を理解するのを手伝ってくれる人はいますか?

石積みのコードは次のとおりです。

$(document).ready(function(){

    var $container = $('#loops_wrapper');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.post_box',
        columnWidth: 302

        });
      });
    });

これは ajax フェッチ コードです。

$('.load_more_cont a').live('click', function(e) {
    e.preventDefault();
    $(this).addClass('loading').text('Loading...');
    $.ajax({
        type: "GET",
        url: $(this).attr('href') + '#loops_wrapper',
        dataType: "html",
        success: function(out) {
            result = $(out).find('.post_box');
            nextlink = $(out).find('.load_more_cont a').attr('href');

            $('#loops_wrapper').append(result).masonry('appended', result);
            $('.load_more_cont a').removeClass('loading').text('Load more posts');

            if (nextlink != undefined) {
                $('.load_more_cont a').attr('href', nextlink);
            } else {
                $('.load_more_cont').remove();
            }
        }
    });
});
4

1 に答える 1

4

画像を追加するために、ここでDavid DeSandroのタイマーアプローチを実装しようとすることができます...

「入門書で推奨されているように、画像を処理するための最善の解決策は、特に無限スクロールを使用する場合に、img タグでサイズ属性を定義することです。これは、以下の例で採用されている解決策です。

もちろん、これは一部の CMS、特に Tumblr では実行可能なオプションではありません。この状況では、新しく追加されたイメージが完全にロードされた後に Masonry を呼び出す必要があります。これは Masonry コールバックを遅らせることによって行われます。」

function( newElements ) {
    setTimeout(function() {
    $wall.masonry({ appendedContent: $(newElements) });
    }, 1000);
}

編集：無限スクロールでアイテムを追加するための一般的な遅延のアイデアを実装できない場合は、新しいアイテムを追加した後にリロードを試すことができます。

$('#loops_wrapper').append(result).masonry('appended', result);

そのようにする

$("#loops_wrapper").append(result).masonry('reload');
于 2012-08-23T14:13:46.457 に答える