html - 砌体插件不起作用

Question

我刚刚开始使用 masonry 插件，但我无法让它工作。下面是问题的图片。

如您所见，这不是预期的效果。以下是我正在使用的代码：

内容

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

石工

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

请你能帮我解决我做错了什么吗？我也将 Bootstrap 用于网格系统，顺便说一下，我不确定这是否可能是问题所在。谢谢。

Answer 1

您应该将 bootstrap 的col-md-X类应用于您的块，因为您明确告诉 masonry 您的块的最小宽度是 400 像素，并且 bootstrap 的 col-md-X 可以根据屏幕的分辨率而变化。

1. 定义块的最小宽度（就像旧的960 网格系统一样，最多 16 列（这意味着最小 60 像素）。400 像素似乎很多，不是吗？所以我们说 100 像素。
2. 定义一个新类，假设.masonry-normal-grid并将其应用于您的块。

在 CSS 中，创建

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

您也可以创建 .masonry-small-grid 或 .masonry-large-grid，只要 javascript 中定义的 columnWidth 代表您的类的最小宽度（您的 CSS 类宽度不应小于 javascript 属性 columnWidth）。

重要提示：ID必须是唯一的！所以重命名<div id="box_review">为<div class="box_review">（并将您的javascript属性#box_review更改为.box_review）

注意：您应该做if elseif而不是仅if（甚至是switch(case)）。