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;
}

我的脑子部分有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

如果你设法整理你的代码，它应该有用......

为什么JQuery Masonry没有垂直对齐？

1 个答案: