摆脱图像库中的空白区域

Question

嗨伙计们我不确定这是否是正确的术语，但我在使用砌体的想法建立一个图像画廊，所以基本上，一切都是不同的大小，我的问题是我有我的胆汁和我之间的巨大差距想知道我怎么能摆脱它。我的问题看起来像这样：

我希望这样红色圆圈中的空间可以消失，我可以将它们连接在一起

HTML：

<div class="row">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x600" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x700" alt="Card image cap">
    </div>
  </div>
</div>
    <div class="row">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x600" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x700" alt="Card image cap">
    </div>
  </div>
</div>

请让我知道，如果有一个更简单的方法，我使用boostrap 3或如果我做一些愚蠢但我想建立一个使用这个想法的画廊，但只是这样我可以摆脱那些大空间

谢谢

Answer 1

您正在尝试使用多行，这使得无法避免这些差距。您所要做的就是，整个页面中只有一行，但是多列。那就没有差距了。伪代码如下：

<div class=row>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
 <div>