CSS - Fill remaining space if it's avaliable

Question

I'm trying to create a mosaic of options with images of different sizes, so the free vertical space needs to be filled. Is there any way using CSS or do I need to use JavaScript somehow?

Image: https://i.sstatic.net/Ukl8L.jpg

<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

Not really; this is what Javascript libraries like Masonry were built to do. Masonry is easy to use, you should be able to drop it in and have it arrange your items more tightly.