javascript - WordPress のライブ サイトでは Masonry.js の問題が発生するが、ローカルの開発サイトでは問題が発生しない

Question

私はこのサイトに取り組んでいます: http://lisarevson.com/

Masonry.js でワードプレスのテーマを使用しています。

サイトをダウンロードして DB のクローンを作成したところ、サイトは MAMP Pro でローカルに正常に表示されます。

しかし実際のサイトでは、ご覧のとおり、石積みのタイルが下から上にスライドして重なり合っています。ローカルではなくライブで発生する理由と、修正方法が少しわかりません。

考え？

Answer 1

ありがとう。誰もが正しい方向に進んでいたので、答えは imagesLoaded でした。

jQuery(document).ready(function($){
    // initialize Masonry
    var $container = $('#content-blog').masonry();
    // layout Masonry again after all images have loaded
    $container.imagesLoaded( function() {
      $container.masonry();
    });

});

Answer 2

window.load で masonry を呼び出してみてください

<script type="text/javascript">
jQuery(document).ready(function($){
$("#wrapper").vids();
});
jQuery(window).load(function($){
$('#content-blog').masonry({columnWidth:323});
});
</script>

実際に何が起こるかというと、masonary が最初に実行され、次にイメージがライブ サーバーにロードされ (ネット速度のため)、ローカルでは両方が同時にロードされます。

Answer 3

スティーブ・トライも

var $container = $('#content-blog');
// initialize
$container.masonry({
columnWidth: 323,
itemSelector: '.post'
});

Leが言うように、スクリプトを上から下に移動し、 masonry.min.js の後に配置します

お役に立てれば

Answer 4

js 関数をヘッダーに配置しているのがわかります:

<script type="text/javascript">
jQuery(document).ready(function($){
$("#wrapper").vids();
});
jQuery(document).ready(function($){
$('#content-blog').masonry({columnWidth:323});
});
</script>

mansory.js が呼び出された後、フッターに移動する必要があると思います。