Question

如果以前已经回答过，我道歉。我做了搜索，并在这个问题上发现了一些线程，但我仍然在努力让它发挥作用。我希望找到一个特定于我的代码的解决方案。

我目前有一个自举网格系统，并且每个横向图片下面都有额外的死角。

我想让图像之间的空间（垂直）无论高度如何都是一样的。我的图像是900px x 558px或558px x 900px。

我认为这个布局功能与Pinterest类似。

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

.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;
}

CSS：

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

});

使用Javascript：

function getValueForKey(){
    while read -r line
    do
        #echo $line
        key=`echo $line | cut -d = -f1`
        value=`echo $line | cut -d = -f2`

        if [ "$2" == "$key" ]; then
            echo $value
        fi;

    done < "$1"
}

非常感谢任何帮助！

Answer 1

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

只要图像中存在可变高度，就应该使用相同的宽度或打包布局，以实现类似pintrest的布局。

要实现这一点，您需要像这样实例化您的Filterizr：

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

或

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

Bootstrap网格中的可变高度

1 个答案: