javascript - 引导网格中的可变高度

抱歉，如果之前已经回答过。我进行了搜索，发现了一些有关此问题的线索，但仍在努力使其正常工作。我希望有一个针对我的代码的解决方案。

我目前有一个引导网格系统，并且在每张以景观为导向的图片下均具有额外的死角。

我希望图像之间的空间（垂直）相同，而不管其高度如何。我的图片是900px x 558px或558px x 900px。

我认为此布局功能类似于Pinterest。

HTML（我删除了2、3和4）：

<div class="pages section">
    <div class="container">
        <div class="pages-head">
            <h3>PORTFOLIO</h3>
            <div class="underline"></div>
            <h7> BRIDAL MAKEUP </h7>
        </div>
        <div class="portfolio">
            <ul class="simplefilter">
                <li class="active" data-filter="1"><p>BRIDAL 1</p></li>
                <li data-filter="2"><p>BRIDAL 2</p></li>
                <li data-filter="3"><p>BRIDAL 3</p></li>
                <li data-filter="4"><p>BRIDAL 4</p></li>
            </ul>
            <div class="row">
                <div class="filtr-container">

                    <!-- bridal gallery 1 photos -->

                    <div class="col s6 filtr-item col-pd" data-category="1">
                        <a href="../img/portfolio/bridal/gallery_1/bridal_gallery_1-1.jpg" class="image-popup"><img class="responsive-img" src="../img/portfolio/bridal/gallery_1/bridal_gallery_1-1.jpg" alt="sample image"></a>
                    </div>

                     <div class="col s6 filtr-item col-pd" data-category="1">
                        <a href="../img/portfolio/bridal/gallery_1/bridal_gallery_1-2.jpg" class="image-popup"><img class="responsive-img" src="../img/portfolio/bridal/gallery_1/bridal_gallery_1-2.jpg" alt="sample image"></a>
                    </div>

                    <div class="col s6 filtr-item col-pd" data-category="1">
                        <a href="../img/portfolio/bridal/gallery_1/bridal_gallery_1-3.jpg" class="image-popup"><img class="responsive-img" src="../img/portfolio/bridal/gallery_1/bridal_gallery_1-3.jpg" alt="sample image"></a>
                    </div>

                    <div class="col s6 filtr-item col-pd" data-category="1">
                        <a href="../img/portfolio/bridal/gallery_1/bridal_gallery_1-4.jpg" class="image-popup"><img class="responsive-img" src="../img/portfolio/bridal/gallery_1/bridal_gallery_1-4.jpg" alt="sample image"></a>
                    </div>

                    <!-- end bridal gallery 1 photos -->

                </div>
            </div>
        </div>
    </div>
</div>
<!-- end portfolio single -->

CSS：

.container {
    width: 70%;
}

.container .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row .col {
  float: left;
  box-sizing: border-box;
  padding: 0 0.75rem;
  min-height: 1px;
}

.row .col[class*="push-"], .row .col[class*="pull-"] {
  position: relative;
}

.row .col.s6 {
  width: 50%;
  margin-left: auto;
  left: auto;
  right: auto;
}

Javascript：

$(function(){
    'use strict';

     // portfolio filter container
    $('.filtr-container').filterizr('filter', '1');

    // portfolio filter
    $('.simplefilter li').click(function() {
        $('.simplefilter li').removeClass('active');
        $(this).addClass('active');
    });

    // portfolio image-popup
    $(".image-popup").magnificPopup({
        type: "image",
        removalDelay: 300,
        mainClass: "mfp-fade"
    });

});

非常感谢您的协助！

最佳答案

解决此问题的方法是在选项中实例化Filterizr的布局。

只要图像中的高度可变，就应该使用sameWidth或压缩布局，以获得类似pintrest的布局。

为此，您需要像这样实例化Filterizr：

$('.filtr-container').filterizr({ layout: 'sameWidth' });

要么

$('.filtr-container').filterizr({ layout: 'packed' });