flexbox isotope-esq

Flexbox layout (with inline-block fallback) with filtering akin to isotope.

by moob

HTML

<div id="flexbox">
    <div class="item"><img src="http://lorempixel.com/200/100/city/" /><p>Vestibulum Tortor Ornare Nullam Tellus</p><button>button</button></div>
    <div class="item"><img src="http://lorempixel.com/200/100/city/" /><p>Vestibulum Tortor Ornare Nullam Tellus</p><button>button</button></div>
    <div class="item"><img src="http://lorempixel.com/200/100/city/" /><p>Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p><button>button</button></div>
    <div class="item"><img src="http://lorempixel.com/200/100/city/" /><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p><button>button</button></div>
    <div class="item"><img src="http://lorempixel.com/200/200/city/" /><p>Vestibulum Tortor Ornare Nullam Tellus</p><button>button</button></div>
    <div class="item"><img src="http://lorempixel.com/200/100/city/" /><p>Vestibulum Tortor Ornare Nullam Tellus</p><button>button</button></div>
    <div class="item"><img src="http://lorempixel.com/200/100/city/" /><p>Vestibulum Tortor Ornare Nullam Tellus</p><button>button</button></div>
    <div class="item"><img src="http://lorempixel.com/200/100/city/" /><p>Vestibulum Tortor Ornare Nullam Tellus</p><button>button</button></div>
    <div class="item"><img src="http://lorempixel.com/200/100/city/" /><p>Vestibulum Tortor Ornare Nullam Tellus</p><button>button</button></div>
</div>

CSS

#flexbox {
    /* comment out the next 4 lines to see how this works without flex-box support 
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    flex-flow: row wrap;*/
    box-sizing: border-box;
    margin:5px;
    font-size:0;
}

.item{
    font-size:16px;
    display:inline-block;
    vertical-align:top;
    background: #eee;
    margin: 0px;
    flex-grow: 0;
    width:25%;
    transition: all 400ms ease;
    box-sizing: border-box;
    border:5px solid white; /* cheat! use a border that's the same colour as the background to mimic a margin */
    padding:5px;
    position:relative;
    min-height: 60px;
    padding-bottom:2em; /*space for button */
    box-shadow:
        inset 0px -1px 0px orange,
        inset 0px 0px 1px #666;
}
.item img {
    width:100%;
}
.item button {position:absolute; bottom:6px;}

#flexbox .off {
    width:0; min-width:0px; height:0; min-height:0; overflow:hidden;
    margin:0; opacity:0; border:0;
    padding:0;
}

/* 3 per row */
@media (max-width: 600px) {
  .item {
    width:33.333%;
  }
}
/* 2 per row */
@media (max-width: 400px) {
  .item {
    width:50%;
  }
}
/* 1 per row */
@media (max-width: 200px) {
  .item {
    width:100%;
  }
}

JavaScript

$('.item').on('click', function(e) {
    var i = $(this).index()+1;
    $(".item:nth-child("+i+"n)").each(function(){
        var $el = $(this);    
        $el.addClass("off");
        setTimeout(function(){$el.removeClass("off");},3000);
    });
    
    
});