JSFiddle - React, Tailwind, and code Playground

by surakrai

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div class="post">
    <div class="list-post">
        <img src="http://placehold.it/400/3cb878/ffffff">
    </div>
    <div class="list-post">
        <img src="http://placehold.it/200/3cb878/ffffff">
    </div>
    <div class="list-post">
        <img src="http://placehold.it/200/3cb878/ffffff">
    </div>
    <div class="list-post">
        <img src="http://placehold.it/200/3cb878/ffffff">
    </div>
    <div class="list-post">
        <img src="http://placehold.it/200/3cb878/ffffff">
    </div>
        
    <div class="list-post">
        <img src="http://placehold.it/200/3cb878/ffffff">
    </div>
    <div class="list-post">
        <img src="http://placehold.it/400/3cb878/ffffff">
    </div>
    <div class="list-post">
        <img src="http://placehold.it/200/3cb878/ffffff">
    </div>
    <div class="list-post">
        <img src="http://placehold.it/200/3cb878/ffffff">
    </div>
    <div class="list-post">
        <img src="http://placehold.it/200/3cb878/ffffff">
    </div>
<div>

CSS

.post{
    width: 800px;
    margin: 0 auto;
}
.post .list-post{ 
    width: 200px;
    padding: 0 5px 5px 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.post .list-post img{
    display: block;
}

JavaScript

$('.post .list-post img').each(function(){
    if($(this).width() > 200){
        $(this).closest(".post .list-post").css("width","400px");
    }
})   
$(".post .list-post img").css("width","100%"); 

$('.post').isotope({
    itemSelector : '.list-post',
    masonry : {
        columnWidth : 200
    }
});