Masonry plugin not working

Question

I have just started to use the masonry plugin but I cannot get it to work. Below is a picture of the problem.

enter image description here

As you can see this is not the desired effect. Below is my code that I am using:

CONTENT

    <div class="container" id="reviews">
  <div class="row">
    <div class="comment-block">
      <div class="new-comment"></div>
        <?php 
          while($row = mysqli_fetch_array($result)) {
            $data = mysqli_fetch_array(mysqli_query($con, "SELECT first_name, last_name FROM transactions WHERE order_id = '{$row['order_id']}'"));
            $name = $data['first_name']. ' '. mb_substr($data['last_name'], 0, 1);
            if($row['rating'] == 5) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>'; 
            if($row['rating'] == 4) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>'; 
            if($row['rating'] == 3) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>'; 
            if($row['rating'] == 2) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>'; 
            if($row['rating'] == 1) $star = '<span class="glyphicon glyphicon-star review_star"></span>'; 
          ?>
          <div class="col-md-4">
            <div id="box_review">
              <h3><?php echo $star; ?></h3>
              <h5 class="thin"><?php echo $row['date'] ?></h5>
              <blockquote>
                <p><?php echo $row['comment'] ?></p>
                <footer><?php echo $name ?></footer>
              </blockquote>
            </div> 
          </div>
        <?php } ?>
    </div><!-- ./ comments block -->
  </div><!-- ./ row -->
</div><!-- ./ container -->

MASONRY

    $(document).ready(function() {
  $('#reviews').masonry({
   columnWidth: 400,
   itemSelector: '#box_review'
  }).imagesLoaded(function() {
   $('#reviews').masonry('reload');
  });
});

Please can you help me with what I am doing wrong? I am using Bootstrap for the grid system as well by the way I am not sure if that might be the problem. Thanks.

score 0 · Answer 1 · answered Apr 07 '14 at 10:39

You should apply bootstrap's col-md-X classes to your blocks because you are explicitly telling masonry that the minimal width of your blocks is 400 pixels and bootstrap's col-md-X can vary depending on the screen's resolution.

Define the minimum width of your blocks (just like with the old 960 grid system that is up to 16 columns (which means 60 pixels minimum). 400 pixels seems a lot, no ? So let's say 100px.
Define a new class, let's say .masonry-normal-grid and apply it to your blocks.

In CSS, create

.masonry-normal-grid {
    width:300px;
}

You can also create .masonry-small-grid or .masonry-large-grid as long as thecolumnWidth defined in javascript represents the lowest width of your classes (you should not have a CSS class width smaller than the javascript attribute columnWidth).

Important : Id MUST be unique ! So rename <div id="box_review"> into <div class="box_review"> (and change in your javascript attribute #box_review into .box_review too)

Note : You should do if elseif instead of only if (or even a switch(case)).

Masonry plugin not working

1 Answers1