Question

我的网站的基本结构是这样的：

<div class="container-fluid">
  <div class="row masonry-container">
    <div class="col-md-4 item">
      <div class="panel">
       Panel content here.
      </div>
    </div>
 <!-- I have 15 col-md-4 and panel before closing my row and container -->
  </div>
</div>

每个面板内部都有一些链接来自Wordpress while循环。因此，我的所有面板都有不同的高度，我想使用砌体样式的网格，这样我就能以优雅的方式装配它们。

我的砌体脚本是这样的：

<script>
$('.masonry-container').masonry({
  itemSelector: '.item', 
  columnWidth: '.panel',
  percentPosition: true
});
</script>

这是我第一次尝试使用砌体网格，但它不起作用，但我不知道问题可能是什么。

修改

这是我工作的网站的屏幕。正如您所看到的那样，网格已经就位，好像Masonry不在那里，就像Bootstrap默认网格一样。 Screen of my website

Answer 1

将 Script para Masonry 更改为：

$(function(){
  $('.masonry-container').masonry({
    itemSelector: '.item', 
    columnWidth: '.panel',
    percentPosition: true
  });
});

您的页面出现Object doesn't support property or method 'masonry'之类的错误，因此您需要延迟执行脚本，直到页面加载完毕。这是jQuery中$(document).ready()的简写版本的示例，如此处所示https://learn.jquery.com/using-jquery-core/document-ready/

无法一起开始砌体和Bootstrap

1 个答案: