Nie można dostać się do pracy Masonry i Bootstrap razem - jquery, twitter-bootstrap, masonry

Moja witryna ma podstawową strukturę, która wygląda mniej więcej tak:

<div class="container-fluid">
<div class="row masonry-container">
<div class="col-md-4 item">
<div class="panel">
Panel content here.
</div>
</div>
<!-- I have 15 col-md-4 and panel before closing my row and container -->
</div>
</div>

Każdy panel zawiera kilka linków, z których można pobraćpętla Wordpress podczas pętli. Z tego powodu wszystkie moje panele mają różne wysokości i chcę użyć siatki w stylu murowanym, aby móc je wszystkie dopasować w elegancki sposób.

Mój skrypt do masonerii brzmi:

<script>
$(".masonry-container").masonry({
itemSelector: ".item",
columnWidth: ".panel",
percentPosition: true
});
</script>

Po raz pierwszy próbuję użyć siatki murowanej i nie działa, ale nie mam pojęcia, czym może być problem.

EDYTOWAĆ

To jest ekran witryny internetowej, w której pracuję. Jak widać, siatki są na miejscu, jak gdyby nie było masonerii, i tak jak domyślna siatka Bootstrap. Ekran mojej strony internetowej

Odpowiedzi:

Zmień swoje Masoneria skryptu para być:

$(function(){
$(".masonry-container").masonry({
itemSelector: ".item",
columnWidth: ".panel",
percentPosition: true
});
});

Twoja strona ma błędy takie jak Object doesn"t support property or method "masonry", więc musisz opóźnić wykonanie skryptu do momentu załadowania strony. To jest przykład skróconej wersji $(document).ready() w jQuery jak pokazano tutaj https://learn.jquery.com/using-jquery-core/document-ready/