1

いくつかの画像を含むタイルの束で石積みのレイアウトを作成しようとしています。おおよそ私のコードは次のとおりです。

var $mainContent = $('#main-content');

$mainContent.imagesLoaded(function() {
  $mainContent.masonry()
});

loadMore = function() {
  $.ajax({
    url: '/things',
    success: function (data) {
      var $data = $(data);
      $data.imagesLoaded(function() {
        $mainContent.append($data).masonry('appended', $data, true)
      })
    }
  })
}

$('#load-more').on('click', loadMore)

ただし、これを実行すると、Chrome のコンソールに次のエラーが表示されます。

Uncaught TypeError: Cannot read property 'width' of undefined

痕跡：

bB jquery.min.js:2
f.each.f.cssHooks.(anonymous function).get jquery.min.js:4
f.extend.css jquery.min.js:4
f.each.f.fn.(anonymous function) jquery.min.js:4
e.extend.access jquery.min.js:2
f.each.f.fn.(anonymous function) jquery.min.js:4
f.each.f.fn.(anonymous function) jquery.min.js:4
$.Mason._placeBrick jquery.masonry.js:246
$.Mason.layout jquery.masonry.js:172
$.Mason._appended jquery.masonry.js:352
$.Mason.appended jquery.masonry.js:341

Masonry v.2.1.05 と jQuery v1.7.2 を使用しています

ただし、代わりに を実行reloadするとappended、デモのように機能しますが、投稿を下から入力したいので、すべての投稿を再計算したくありません。

何が起こっているか知っていますか？

この問題もgithubに投稿しましたが、まだ応答がありません。

4

3 に答える 3

7

これは、アニメーションを作成し、さまざまなサイズの画像を正しくレンダリングするために必要なものでした。 

var el = jQuery(html);
el.imagesLoaded(function() {
    $('#container').append(el).masonry( 'appended', el );
});
于 2012-11-26T20:39:59.407 に答える
1

この解決策を試してください...これは確実に機能します。

//Initiate your maosnry
$container = $('#container');
$container.imagesLoaded(function(){ 
    $container.masonry({
        itemSelector: '.item'
    }); 
});

//and on ajax call use this to append or prepend
$container.append($data).imagesLoaded(function(){
    $container.masonry( 'appended', $data, true );
});
于 2014-04-23T11:18:32.533 に答える
1

これが問題への答えかどうかはわかりませんが... 我慢してください、私はここで大声で考えています...

ハンドラー内に.append($data)表示されることを考えると、そのイベントがどのように発生するかは明確ではありません。私の理解に基づいて、ブラウザーは(おそらく HTML 文字列) に基づくフラグメントが DOM に ( .$data.imagesLoadeddata.append()

次のほうがより理にかなっています。

loadMore = function() {
    $.ajax({
        url: '/things',
        success: function (data) {
            var $data = $(data);
            $data.imagesLoaded(function() {
                $mainContent.masonry('appended', $data, true);
            }).appendTo($mainContent);
        }
    });
};

そうは言っても、コードではimagesLoadedイベントが発生する必要があります。そうしないと、なぜエラーが発生するのでしょうか? たぶん、画像は追加されていないフラグメントに読み込まれます!

とにかく、私のバージョンを試してみてください。動作するか、以前と同じエラーが発生すると思います。

于 2012-06-24T01:07:28.330 に答える