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

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

JavaScript

$(document).ready(function(){
    $('.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
        }
    }); 
    
});