WilloPillow WilloPillow - 1 month ago 16
jQuery Question

Masonry layout with bootstraps panel

Anyone here good with MasonryJs with bootstrap?

I'm having this issue :
enter image description here

This is what I got so far

<div class="row" id="grid">
<div class="col-md-6 item">
<div class="panel panel-default>
.....
</div>
</div>
</div>

$("#grid").masonry({
itemSelector: '.item',
columnWidth: '.item'
});


Maybe someone can enlighten me why this is occuring? Thank




So I moved the grid class to grid id the this the result I got. Turns out that all the the panels are stack up as one.

enter image description here

Answer

This is the Masonry init code you're using, from the question:

$("#grid").masonry({
 itemSelector: '.item',
 columnWidth: '.item'
});

This is the init snippet for using Masonry with jQuery.

You do not appear to be using jQuery, so you need to use the vanilla JavaScript init for Masonry:

var elem = document.querySelector("#grid");
var masonry = new Masonry(elem, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-item'
});