2

AJAX から返されたデータをメーソンリー コンテナーに追加すると、以前に読み込まれた項目に既に適用されているグリッド レイアウトが取得されません。ドキュメント対応関数にラップされた次のコードを使用しています。

// Masonry
var $container = $('#masonry-container');
$container.imagesLoaded(function () {
    $container.masonry({
        itemSelector: '.grid_4',
        isAnimated: true
    });
});

// AJAX Fotolia Image Search
var morebtn = $('.get-more-results');
var sOffset = 50;
morebtn.on('click', function () {
    var $cst = $('.crrsrch').text();
    $.ajax({
        type: "POST",
        url: "...",
        data: {};
        success: function (data) {
            $container.imagesLoaded(function () {
                $container.append(data);
                $container.masonry('appended', data);
            });
        }
    });
    return false;
});

AJAX 呼び出しからの項目が追加されますが、石積みのレイアウトはありません。追加されたように表示されるのではなく、リストの一番上に表示されます。データはマークアップに追加されています。

Masonry に追加されたメソッドを使用すると、エラーもスローされます。コンソールに次のように表示されます。

Uncaught TypeError: Property 'webkitMatchesSelector' of object is not a function
    i
    r._filterFindItemElements
    r._getItems
    r.addItems
    r.appended
    t.fn.(anonymous function)
    (anonymous function)
    doneLoading

最後の 2 つ ((無名関数) と doneLoading) を除いて、これらはそれぞれ masonry js ファイルに関連しています。

石工サイトのメソッド ドキュメントを使用すると、これでうまくいくはずです。明らかに、ここで何かが欠けています。

役立つ追加情報 - - AJAX 呼び出しは Fotolia API に対するものです - サイトは Wordpress 3.5.2 で構築されています - JavaScript ファイルはキューに入れられています

誰かが何かアイデアを持っているか、助けを提供できるなら、それは大歓迎です。

よろしくお願いします。

4

4 に答える 4

0

function(data){
//append received data into the element
$container.append(data).masonry('reloadItems').masonry( 'layout' ); }

これを試してみてください。

于 2014-07-07T09:50:06.510 に答える
0

$container.masonry('reload'); を適用するのに役立ちました。

例えば：

success: function (data) {
        $container.imagesLoaded(function () {
            $container.append(data);
            $container.masonry('appended', data);
            $container.masonry({
              itemSelector: '.grid_4',
           });
             $container.masonry('reload');
        });
    }
于 2013-12-31T11:59:57.050 に答える