みんな！
私は最初のウェブサイトをゼロから構築しています。HTML と CSS は知っていますが、JavaScript と PHP の知識は本当に基本的なものです。そのため、Web サイトでは Masonry グリッド レイアウト ライブラリを使用し、それを ImagesLoaded と組み合わせて、画像が重ならないようにしています。公式サイトの指示に従って HTML にスクリプトを含めたのですが、なぜかまったく機能しません。(ImagesLoaded を使用しない Masonry だけで動作していましたが、画像が重なっています。) 何が間違っているのか教えてください。
ウェブページはこちらです。ご覧のとおり、Masonry は初期化されていません。
http://vprilenska.netai.net/design_archandfilm.php
これがスクリプトです。ボディ終了タグの前に、HTML の下部に含めました。
<script src='js/masonry.js'></script>
<script src='js/imagesloaded.js'></script>
<script>
var container = document.querySelector('#masonry');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
gutter: container.querySelector('.gut_width'),
itemSelector: '.item',
stamp: '.stamp',
columnWidth: container.querySelector('.col_width');
});
});
</script>
はい、石積みはアイテムに適用されます。各アイテムは、画像とキャプションを含む div で、右にフロートされます。すべての画像はコンテナの石積みにあります。列幅とガターは要素によって定義されます。