Почему 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; 
} 

У меня есть функции 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 

Если вам удастся привести в порядок свой код, он должен работать ...