带砌体的引导程序答案

【问题标题】：Bootstrap with Masonry带砌体的引导程序
【发布时间】：2018-06-16 19:39:23
【问题描述】：

场景

该网站是用 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。

我在做什么

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

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

我正在使用 Masonry 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。

【问题讨论】：

你能做一个 jsfiddle 演示吗？

标签： javascript html twitter-bootstrap

【解决方案1】：

我不认为你打电话给$.masonry()。我查看了源代码，似乎没有绑定#masonry-container。因此，将此 sn-p 添加到页面的页脚。

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

【讨论】：