jquery - 为什么 JQuery Masonry 不垂直对齐？

Question

我一直在尝试为我的 WordPress 主题设置砌体网格。它不垂直对齐。我已经阅读了很多教程并搜索了许多 stackoverflow 答案。我尝试了所有解决方案，但似乎没有任何效果。

http://michellecantin.ca/test/portfolio-2/3444-2/

这是我的 CSS:

#container {
position:relative;
left:28%;
width:69%;
}

.item {
width:200px;
float:left;
background: #fff;
}

我的 head 部分有 JQuery 函数:

<!--Jquery functions-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.masonry.min.js"></script>
<script type="text/javascript">    // This block will be put in a separate file later on (JQuery.js)
$(document).ready(function() {
   var $container = $('#container');            
   //$container.imagesLoaded(function(){                    
      $container.masonry({
         itemSelector: '.item',
         isAnimated: true,
      });
   //});
});
</script>

在标题之后，我有网格:

<div name="top" id="container">
    <div class="item">
        <h3>1</h3>
        <p></p>
    </div>
    <div class="item">
        <h3>2</h3>
        <p></p>
        <p></p>
    </div>
    <div class="item">
        <h3>3</h3>
        <p></p>
    </div>
    <div class="item">
        <h3>4</h3>
        <p></p>
        <p></p>
    </div>
    <div class="item">
        <h3>5</h3>
        <p></p>
    </div>
</div>

我不知道我做错了什么!拜托，我需要你的帮助!

Answer 1

您有一些 jQuery 冲突。发生这种情况是因为您、Wordpress 和您的插件都在多个位置加载了多个 jQuery 代码。这需要一些命令才能工作。

您可以尝试以下方法: 将所有的 jQuery 代码放在一个文件中，例如这里:

<script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js" type="text/javascript"></script>

把它放在你的页脚中，在 </body> 之前

标题中的 jquery.js 文件和 masonry.jquery.js 位于正确的位置，因此您可以将其保留在那里。

现在在你的新脚本文件中，确保你的代码被 jQuery(document).ready(function($) { ... }); 包围，像这样:

jQuery(document).ready(function($) {

  //your masonry code goes here, f.e.:
  $('#container').masonry({ 
    isAnimated: true,
itemSelector: '.item'
   });

  //and your toggle function:
  $('.toggle-view-style1 li, .toggle-view-style2 li, .toggle-view-style3 li, .toggle-view-style4 li, .toggle-view-style5 li').click(function () {
    var text = $(this).children('div.panel');
    if (text.is(':hidden')) {
        text.slideDown('200');      
    } else {
        text.slideUp('200');    
    }

  });

  //and your close alert box
  $('.close-alert-box-style1, .close-alert-box-style2, .close-alert-box-style3, .close-alert-box-style4').click(function(){
    $(this).parent().remove();
    return false;
  });

  // etc : so all the small pieces of jquery in your website, that now start with $(document).ready(function () { or jQuery(document).ready(function()              {

}); // end of jQuery ready function

如果你设法整理你的代码，它应该可以工作......