2

私が取り組んでいるワードプレスのテーマでjquery石積みを使用しています。しばらくの間それを動作させるのに苦労した後、私はこれを見つけました：

        <script type="text/javascript">
        jQuery(function () { 
          jQuery('#masonry-wrap').masonry({ 
           itemSelector: '.masonry-box', 
           columnWidth: 283 
          }); 
        })
        </script>

私にとってはうまく機能しているようです...しかし、ChromeとSafariでサイトをチェックすると、含まれている要素の下部が次の要素にプッシュされます...

今、私はどこかでこれを読んで、imagesLoadedプラグインとこ​​こで見つけたコードを使用することで解決できます：http：//masonry.desandro.com/demos/images.html-しかし、私はjQueryで絶対にひどいので、私はそれを動作させるのに少し苦労しています。

誰かが私がすでに使用していてそれが機能するコード（上記のもの）にそれを組み込むのを手伝ってもらえますか？

どんな助けでも大歓迎です!! ジュリアン

4

1 に答える 1

3

これでうまくいくと思います。

// Masonry Trigger
var $container = jQuery('#masonry-wrap');

$container.imagesLoaded( function(){
   $container.masonry({ 
     itemSelector: '.masonry-box', 
     columnWidth: 283 
   }); 
})

imagesLoaded の最新バージョンを使用することを忘れないでください。しばらく前に問題が発生しました。その理由は、私のバージョンが少し古いためです。

編集

つまり、AJAX 経由で新しいコンテンツを読み込んで reLayout メソッドを使用している場合にのみ、imagesLoaded を使用します。画像がロードされた後に $window.load() で masonry を実行すると、正常に実行されるはずです。

(function($){

    $(window).load(function() {

      // Masonry Trigger
      var $container = $('#masonry-wrap');

      $container.masonry({
         // options
         itemSelector: '.masonry-box', 
         columnWidth: 283 
      });

    }); 

})(jQuery);
于 2012-07-07T14:18:18.137 に答える