用砌体引导

Question

场景

该站点使用Bootstrap构建，并具有几个高度变化的div（或列）。

我的HTML基本上是这样的：

<div class="container">
      <div id="masonry-container" class="row">
           <div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12">
                <!-- Text and so on -->
           </div>
      </div>
</div>

问题

问题是Bootstrap在具有不同高度的列时不能很好地工作。这是一个常见问题，请参阅下面的示例，或访问我的page。

我在做什么

我试图将Masonry与Bootstrap一起包含，以便在高度不同时正确对齐列。上面示例中的列将如下所示：

但是，我无法让它正常工作。我不确定我做错了什么，或者我错过了什么。

我正在使用砌体min（here）

我尝试通过以下方法加载functions.php：

//Isotope and masonry
function add_isotope() {
    wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'),  true );
    wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );
    wp_enqueue_script(  'masonry_js', 'http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js', array('jquery'), true  );
    wp_enqueue_script('isotope-init');
}

add_action( 'wp_enqueue_scripts', 'add_isotope' );

我也尝试在header.php中以常规方式包含它：

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script>

然而，似乎没有任何作用。

你能提供一个有效的解决方案吗？

该页面可以找到here。

Answer 1

我不认为你在打电话给$.masonry()。我查了一下源代码，似乎没有任何东西绑定#masonry-container。因此，请将此代码段添加到页面的页脚中。

$('#masonry-container').masonry({
  itemSelector: '.item' // div.item
});

而且因为你在这里使用响应式布局，你应该使用如下所示的reload方法

$('#masonry-container').masonry({
        itemSelector: '.item',
        isAnimated: true // the animated makes the process smooth
});
$(window).resize(function() {
    $('#masonry-container').masonry({
        itemSelector: '.item',
        isAnimated: true
    }, 'reload');
});