0

Masonary をページで動作させようとしていますが、これまでのところうまくいきません。チュートリアルに従ってみましたが、jsFiddle のすべてをコピーしても機能しません。ここで私が見逃しているばかげた明らかなものはありますか？http://jsfiddle.net/gZ77r/

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".masonryImage" }'>
    <div class="masonryImage">
        <img src="http://topknot.ca/wp/wp-content/uploads/2013/10/kitten.jpg" alt="">
    </div>.....

`

4

2 に答える 2

0

画像で Masonry を使用するには、imagesLoaded プラグインを使用する必要があります。Masonry は、div 内の画像が読み込まれていないと、div の高さを認識できないためです。

これに関する情報については、付録を確認してください: http://masonry.desandro.com/appendix.html

画像が読み込まれたプラグインを追加し、JS を介して石積みをインスタンス化してみてください。

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  columnWidth: 200,
  itemSelector: '.masonryImage'
});
// layout Masonry again after all images have loaded
imagesLoaded( container, function() {
  msnry.layout();
});
于 2013-10-09T21:25:45.723 に答える