css - CSS - 如果可用，则填充剩余空间

Question

我正在尝试使用不同大小的图像创建选项马赛克，因此需要填充可用的垂直空间。有什么方法可以使用 CSS 还是我需要以某种方式使用 JavaScript？

图片：http: //imgur.com/TQYsNNC

<style>
  .options {
    width: 1230px;
    height: 100%;
    margin: auto;
    position: relative;
  }

  #stream .large {
    width: 400px;
    height: 575px;
    opacity: 0.8;
    position: relative;
    float: left;
    background: white;
  }

  #stream .big {
    width: 400px;
    height: 380px;
    margin-bottom: 10px;
    opacity: 0.8;
    position: relative;
    float: left;
    background: white;
  }

  #stream .medium {
    width: 400px;
    height: 185px;
    background: white;
    margin-bottom: 10px;
    opacity: 0.8;
    position: relative;
    float: left;
  }

  #stream .small {
    width: 195px;
    height: 185px;
    background: white;
    margin-bottom: 10px;
    opacity: 0.8;
    position: relative;
    float: left;
  }
</style>

Answer 1

并不真地; 这就是像Masonry这样的 Javascript 库的构建目的。砌体很容易使用，你应该可以把它放进去，让它更紧密地排列你的物品。