没有水平滚动条的css砌体布局

Question

我正在尝试为我的面板实现砌体。目前的情况如下：

我希望只要有可能就填补空白。我尝试过使用flexbox，但它的行为就像有一行，在添加更多面板之后，它只是让它们变小了。我也尝试使用column-count属性，但我的面板是分开的（面板从面板主体开始。蓝色和白色），除非有一列中的元素与列相同（即column-count: 4看起来不错面板数量是4）的多样性。以下是我的面板代码的外观：

<div class="container-fluid">
  <div class="col-md-3 ng-cloak" ng-repeat="card in vm.cards" style="margin-bottom: 10px;">
    <div class="panel panel-info" style="min-width:235px;">
      <div class="panel-heading clearfix">
        <h4 class="panel-title pull-left">{{ card.question }}</h4>
        <div class="btn-group pull-right">
          <a href="#" class="btn btn-sm btn-primary">Manage</a>
        </div>
      </div>
      <div class="panel-body">
        {{ card.answer }}
      </div>
    </div>
  </div>
</div>

以下是我的存储库中的确切页面：Github Reposiory

此处还有工作页面：http://188.166.160.66/App/Demo

我想用css实现这个目标，但如果不可能，我会给js一个机会。 如果需要更多屏幕截图，我可以提供它们。

@Edit：我想阻止我的网站进行水平滚动。