2

PHPでwordpressプラグインを書いています。そのプラグインでは、小さなテキストを含む画像を出力し、それを石積みで行いたいと考えています。

HTMLで石積みを初期化すると、うまくいくように見えますが、写真が重なっています:

<div id="container" class="js-masonry"  data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>

したがって、「Imagesloaded」を使用しようとしています（同じ開発者によるものですか？）。

しかし、私が見たように、ImagesLoaded を使用する前に、Masonry を立ち上げて JavaScript で実行する必要があります。plugin_scripts.js で Masonry を初期化すると、フロントエンドでエラーが発生します。

plugin_scripts.js:

jQuery(function() {

alert("hallo");
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

});

フロントエンドのコンソール エラー:

Bad masonry element: null 
masonry.min.js?ver=3.1.2:1
q masonry.min.js?ver=3.1.2:1
d masonry.min.js?ver=3.1.2:1
(anonymous function) schnoogle_scripts_frontend.js?ver=3.9.2:10
j jquery.js?ver=1.11.0:2
k.fireWith jquery.js?ver=1.11.0:2
n.extend.ready jquery.js?ver=1.11.0:2
K jquery.js?ver=1.11.0:2

手伝ってくれますか？

4

3 に答える 3

2

Masonry が何らかの理由でコンテナを見つけられないようです。#containerが実際にページにあることを確認するなど、明白なことを試したことがあると思います。

jQuery を使用している場合 (あなたもそうです)、jQuery のセレクター エンジンを使用できます。

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});

これが呼び出し内であることを確認してdocument.ready、ページの残りの部分の準備が整った後に実行するようにします。

于 2014-09-12T08:42:42.593 に答える