带有Wordpress和images的jQuery砌体 [英] jQuery masonry with Wordpress and imagesLoaded

问题描述

我正在对正在处理的wordpress主题使用jquery石工.在努力使其工作了一段时间后，我发现这:

I am using jquery masonry on a wordpress theme I am working on. After struggling with getting it to work for a while I found that this:

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

对于我来说似乎工作正常……但是，在Chrome和Safari中检查该网站会将包含元素的底部压入以下元素...

Seems to be working fine for me... However checking the site in Chrome and Safari pushes the bottom of the containing elements into the following elements...

现在我在某处阅读，可以通过使用imagesLoaded插件和在此处找到的代码来解决此问题: http://masonry.desandro.com/demos/images.html -但是，由于我对jQuery绝对感到恐惧，因此在使其正常工作方面遇到了一些困难.

Now I read somewhere, that this can be solved by using the imagesLoaded plugin and the code for that I found here: http://masonry.desandro.com/demos/images.html - however since I am absolutely terrible with jQuery, I'm having a little difficulty getting it to work.

有人可以帮助我将其整合到我已经在使用并且可以正常工作的代码中(上面的代码)吗?

Could anyone help me incorporate it into the code I am already using and that works (the one above)?

任何帮助将不胜感激！！朱利安

Any help would be greatly appreciated!! Julian

推荐答案

我认为这应该对您有用；

I think this should work for you;

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

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

记住要使用imagesLoaded的最新版本，我前阵子遇到了问题，原因是我的版本有些过时了.

Remember to use the latest version of imagesLoaded, I had a problem a while back and the reason was my version was slightly out of date.

编辑

也就是说，我仅在通过AJAX加载新内容并使用reLayout方法时才使用imagesLoaded.如果在加载图像后在$ window.load()上运行石工，它也应该可以正常运行.

That said, I only use imagesLoaded when I've loaded in new content via AJAX and am using the reLayout method. If you run masonry on $window.load() after the images are loaded it should run fine too.

(function($){

    $(window).load(function() {

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

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

    }); 

})(jQuery);         

这篇关于带有Wordpress和images的jQuery砌体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！