1

したがって、HTML で初期化するときに Masonry を動作させるのに問題はありませんでしたが、少し Javascript を書かないと「imagesLoaded」を実装する方法がないため、サイトを再加工して jQuery を使用して初期化することにしました。

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="masonry/masonry.pkgd.min.js"></script>
<script src="imagesloaded/imagesloaded.js"></script>

<script type="text/javascript">
$(document).ready(function() 
 {
    $('#portfoliocontent').masonry
     ({
         columnWidth: 255,
         itemSelector: '.item1'
        ).imagesLoaded(function() {
            $('#portfoliocontent').masonry('reload');
          });
      });
  });
</script>

</head>

<body>
<div id="portfoliocontent">
<div class="item1"><img src="images/masonthumb1.jpg"></div>
<div class="item1"><img src="images/masonthumb1.jpg"></div>
<div class="item1"><img src="images/masonthumb1.jpg"></div>
<div class="item1"><img src="images/masonthumb1.jpg"></div>
</div>
</body>

私がまったくやり直している理由は、ロード時に画像がスタックするためであり、Masonry を初期化することさえできません。私は Javascript や jQuery にあまり詳しくないので、助けていただければ幸いです。ありがとう。

4

0 に答える 0