JSFiddle - React, Tailwind, and code Playground

by rjcd

HTML

<script src="https://raw.github.com/desandro/isotope/master/jquery.isotope.js"></script>
<div class="view_frame">
<div id="products" class="products">
        <a href='#' data-type="7" class="product short"><img src='http://placehold.it/175/fff/666&text=t7' /></a>
<a href='#' data-type="4" class="product short"><img src='http://placehold.it/175/fff/666&text=t4' /></a>
<a href='#' data-type="6" class="product tall"><img src='http://placehold.it/175x360/fff/666&text=t6' /></a>
<a href='#' data-type="5" class="product short"><img src='http://placehold.it/175/fff/666&text=t5' /></a>
<a href='#' data-type="0" class="product short"><img src='http://placehold.it/175/fff/666&text=t0' /></a>
<a href='#' data-type="6" class="product short"><img src='http://placehold.it/175/fff/666&text=t6' /></a>
<a href='#' data-type="4" class="product tall"><img src='http://placehold.it/175x360/fff/666&text=t4' /></a>
<a href='#' data-type="5" class="product short"><img src='http://placehold.it/175/fff/666&text=t5' /></a>
<a href='#' data-type="7" class="product short"><img src='http://placehold.it/175/fff/666&text=t7' /></a>
<a href='#' data-type="1" class="product short"><img src='http://placehold.it/175/fff/666&text=t1' /></a>
<a href='#' data-type="3" class="product short"><img src='http://placehold.it/175/fff/666&text=t3' /></a>
<a href='#' data-type="2" class="product short"><img src='http://placehold.it/175/fff/666&text=t2' /></a>
<a href='#' data-type="3" class="product short"><img src='http://placehold.it/175/fff/666&text=t3' /></a>
<a href='#' data-type="2" class="product tall"><img src='http://placehold.it/175x360/fff/666&text=t2' /><a>
<a href='#' data-type="1" class="product tall"><img src='http://placehold.it/175x360/fff/666&text=t1' /><a>
<a href='#' data-type="0" class="product tall"><img src='http://placehold.it/175x360/fff/666&text=t0' /><a>
            </div>
       </div>

            <ul id='selector'>
                <li><a href='#' data-target='0'>0</a></li>
      ...

CSS

body { background: grey; }
.view_frame{
    width: 720px; height: 380px;
    position: absolute;
    top: 10px; left: 00px;
    overflow: hidden;
    overflow-x: scroll;
    padding: 0;
  }
#products {
    position: absolute;
    top: 0; left: 0;
    height: 380px; width: 2100px;
    z-index: 1; overflow: hidden;
  }
    .product { 
      float: left; width: 175px; 
      background: white; margin: 0 0 10px 10px; 
      border-bottom: 1px #ccc solid;
      display: block;
      overflow: hidden; border-radius: 5px;
    }
      .product img { overflow: hidden; border-radius: 5px; }
      .short { height: 175px; }
.tall { height: 360px; }

#selector { position: fixed; bottom: 20px; left: 20px; z-index: 9; background: grey; }
#selector li { float: left; margin-right: 10px; }

JavaScript

$('.products').isotope({
    itemSelector: '.product',
    layoutMode: 'fitColumns',
    resizesContainer: false,
    getSortData: {
        colour: function($item) {
            return $item.data('colour');
        }
    }
});

$('#selector a').on('click', function(e){
    var target = $(this).data('target');
    $('#products [data-type="' + target + '"]').remove().prependTo('#products');
    $('#products').isotope( 'reLayout', function(){console.info('Why you no update?!, huh?')} );
    return false;
});