Using masonry to display posts depending on image size

I’m using masonry to display wordpress posts in a three column grid view. I’m using the following codes:-

<div class="row">
    <div class="col-xs-12 col-lg-12 col-md-12 col-sm-12 clearfix visible-xs visible-sm visible-md visible-lg">
    <div  id="ms-container" >
    <?php while(have_posts())
        {               
            echo '<div class=" ms-item  blog-post"  >';
            the_post();
            echo '<div class="blog-media">';
            if( has_post_thumbnail() ) {
                    the_post_thumbnail( 'medium' ); 
                }
            echo '</div>';  
            echo '<div class="blog-title">';
            the_title();
            echo '</div>';  

            echo '<div class="blog-content">';
            the_content();
            echo '</div>';  

            echo '<div class="blog-footer">footnotes';
            echo '</div>';

            echo '</div>';

        }
    </div>
</div>
</div>

Jquery part

var container= document.querySelector('#ms-container');
var msnry=new Masonry(container,{
itemSelector: '.ms-item',
columnWidth: 'ms-item'
});

CSS

.ms-item
{
width:30%;
background-color:cornsilk;
border:1px solid gray;
}  /* blog-post , blog-title , blog-* are all used in design the post*/

So, the codes work good and displays three column of equal size (ofcourse because of width 30% ) but the problem is with the image it looks compressed and I want to display the posts according to image size.. like few images(post) should take up multi-columns ..

The masonry look which i want to create can be seen in Halycon Theme

Thanks in advance.
Please help.

Read more here: Using masonry to display posts depending on image size

Wordpress related questions and answers: