javascript - why image show space and go right, it should be fill up the gap -

i trying images fill in available space example website
link view how can show image without space , come different height. should example website.

under code . live demo code

code language html5

<div class="blog_posts">   <div class="">     <div class="col-sm-4 col-md-4 col-lg-4">       <img src="..." class="hg_t_1" alt="">     </div>   </div>   <div class="">     <div class="col-sm-4 col-md-4 col-lg-4">       <img src="...." class="hg_t_2" alt="">     </div>   </div>   <div class="">     <div class="col-sm-4 col-md-4 col-lg-4">       <img src="...." class="hg_t_5" alt="">     </div>   </div>   <div class="">     <div class="col-sm-4 col-md-4 col-lg-4">       <img src="...." class="hg_t_3" alt="">     </div>   </div>   <div class="">     <div class="col-sm-4 col-md-4 col-lg-4">       <img src="..." class="hg_t_4" alt="">     </div>   </div>   <div class="">     <div class="col-sm-4 col-md-4 col-lg-4">       <img src="..." class="hg_t_2" alt="">     </div>   </div>   <div class="">     <div class="col-sm-4 col-md-4 col-lg-4">       <img src="..." class="hg_t_1" alt="">     </div>   </div>   <div class="">     <div class="col-sm-4 col-md-4 col-lg-4">       <img src="..." class="hg_t_4" alt="">     </div>   </div>    </div> 

code language css

    .blog_posts img {     width: 100%; }  .blog_posts img.hg_t_1 {     height: 220px; }  .blog_posts img.hg_t_2 {     height: 280px; }  .blog_posts img.hg_t_3 {     height: 120px; }  .blog_posts img.hg_t_4 {     height: 320px; }  .blog_posts img.hg_t_5 {     height: 150px; } 

it's bit hard understand post think you're trying images fill in available space the example site provided in comments.

i don't think possible pure html5/css, there's javascript library called masonry you're looking for.

your html this:

   <main>        <img src="http://i.imgur.com/nqsrbvc.jpg" class="width33" alt="">        <!-- rest of images -->    </main> 

the width33 class sets max-width of image 33%. allow images scale without changing aspect ratio. , initialize masonry call it:

$('main').masonry({   itemselector: 'img' }); 

here's jsfiddle example images: https://jsfiddle.net/fujtjf7q/