What Is An Isotope In Html

In this article, we are going to learn  Isotope

Isotope is a plugin that allows you to sort and filter HTML elements on a page with minimal setup.

Isotope is a Magical Dynamic Layout Plugin features Layout modes(Intelligent, dynamic layouts that can’t be achieved with CSS alone.), Filtering (Hide and reveal item elements easily with jQuery selectors) and Sorting (Re-order item elements with sorting. Sorting data can be extracted from just about anything).

Isotope. js is a JavaScript library that makes it easy to sort, filter, and add Masonry layouts to items on a webpage.

following code for example 

<style>
.filters ul{
  display: flex;
  justify-content: center;
  list-style: none;
  border-bottom: 2px solid #D9D9D9;
  margin: 30px 15px
}
.filters ul li{
  display: inlnie-block;
  text-align: center;
  margin-right: 12px;
  padding: 0 5px 8px 5px;
  font-weight: 700;
  font-size: 16px; 
  cursor: pointer;
  position: relative;
  margin-bottom: -2px;
  color: #777;
  transition: 0.3s;
  text-transform: uppercase;
}
.filters ul li:hover{
  color: #EB2D3A;
}
.filters ul li.is-checked{
  border-bottom: 2px solid #EB2D3A;
}
.filters ul li:last-child{
  margin-right: 0;
}
 

.grid .grid-item h1{
  background: #EEEEEE;
  height: 150px;
  line-height: 150px;
  color: white;
  font-size: 3em;
  text-align: center;
  margin-bottom: 30px;
}
 
</style>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="filters">
        <ul>
          <li class="is-checked" data-filter="*">All</li>
          <li data-filter=".idea">!dea</li>
          <li data-filter=".ui">UI</li>
          <li data-filter=".ux">UX</li>
          <li data-filter=".code">Code</li>
          <li data-filter=".logic">Logic</li>
          <li data-filter=".creativity">Creativity</li>
        </ul>
      </div>
    </div>
    
    <div class="col-md-12">
      <div class="rows grid data-isotope='{ "itemSelector": ".grid-item", "masonry": { "columnWidth": 200 } }'">
        <div class="col-md-3 grid-item logic" data-category="websites">
          <h1>1</h1>
        </div>
        <div class="col-md-3 grid-item flyers" data-category="flyers">
          <h1>2</h1>
        </div>
        <div class="col-md-6 grid-item idea" data-category="ads">
          <h1>3</h1>
        </div>
        <div class="col-md-4 grid-item code" data-category="books">
          <h1>4</h1>
        </div>
        <div class="col-md-4 grid-item ui" data-category="logos">
          <h1>5</h1>
        </div>
        <div class="col-md-4 grid-item ux" data-category="websites">
          <h1>6</h1>
        </div>
        <div class="col-md-6 grid-item idea" data-category="ads">
          <h1>7</h1>
        </div>
        <div class="col-md-6 grid-item code" data-category="books">
          <h1>8</h1>
        </div>
        <div class="col-md-6 grid-item creativity" data-category="books">
          <h1>9</h1>
        </div>
        <div class="col-md-2 grid-item creativity" data-category="books">
          <h1>10</h1>
        </div>
        <div class="col-md-2 grid-item ux" data-category="books">
          <h1>11</h1>
        </div>
        <div class="col-md-2 grid-item creativity" data-category="books">
          <h1>12</h1>
        </div>
      </div>
    </div>
    
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js.js">
</script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js">
</script>
<script>
var $grid = $('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
});

// change is-checked class on buttons
var $buttonGroup = $('.filters');
$buttonGroup.on( 'click', 'li', function( event ) {
  $buttonGroup.find('.is-checked').removeClass('is-checked');
  var $button = $( event.currentTarget );
  $button.addClass('is-checked');
  var filterValue = $button.attr('data-filter');
  $grid.isotope({ filter: filterValue });
});
</script>

Please review video: