砌体插件不起作用答案

【问题标题】：Masonry plugin not working砌体插件不起作用
【发布时间】：2014-05-18 20:37:42
【问题描述】：

我刚刚开始使用 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 用于网格系统，顺便说一下，我不确定这是否可能是问题所在。谢谢。

【问题讨论】：

标签： html twitter-bootstrap layout grid masonry

【解决方案1】：

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

定义块的最小宽度（就像旧的 960 grid system 一样，最多 16 列（这意味着最小 60 像素）。400 像素似乎很多，不是吗？所以我们说 100 像素。
定义一个新类，比如.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)）。

【讨论】：