Question

我刚开始使用砌体插件，但我无法使用它。下面是问题的图片。

enter image description here

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

内容

    <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');
  });
});

请问我能帮到我做错的事吗？我正在使用Bootstrap作为网格系统以及我不确定这可能是问题的方式。感谢。

Answer 1

您应该将bootstrap的col-md-X类应用于块，因为您明确告诉砌体块的最小宽度为400像素，而bootstrap的col-md-X可能会因屏幕的分辨率而异。

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

在CSS中，创建

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

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

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

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

砌体插件无法正常工作

1 个答案: