Isotope - masonry layout mode

Isotope - masonry layout mode

by rajnishw3

HTML

<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>

<div class="grid">

  <div class="grid-item grid-item--width2">
    <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg">
  </div>
  
  <div class="grid-item grid-item--height2">
    <img src="https://goo.gl/B6QkRk">
  </div>
  
  <div class="grid-item">
    <img src="https://goo.gl/dnYKRS">
  </div>
  
  <div class="grid-item">
    <img src="https://goo.gl/mNEnL1">
  </div>
  
  <div class="grid-item grid-item--width2 grid-item--height2">
    <img src="https://goo.gl/6crnn1">
  </div>
  
  <div class="grid-item grid-item--width2">
    <img src="https://goo.gl/b1DYoa">
  </div>
  
  <div class="grid-item grid-item--width2">
    <img src="https://goo.gl/B6QkRk">
  </div>
  
  <div class="grid-item grid-item--height2">
    <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg">
  </div>
  
  <div class="grid-item">
    <img src="https://goo.gl/dnYKRS">
  </div>
  
  <div class="grid-item grid-item--width2">
     <img src="https://goo.gl/dnYKRS">
  </div>
  
  <div class="grid-item grid-item--height2">
    <img src="https://goo.gl/b1DYoa">
  </div>
  
  <div class="grid-item">
    <img src="https://goo.gl/B6QkRk">
  </div>
  
  <div class="grid-item">
     <img src="https://goo.gl/dnYKRS">
  </div>
  
</div>

CSS

* { box-sizing: border-box; }


/* ---- grid ---- */

.grid {
  background: #DDD;
  width: 100%;
}



/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid #333;
  border-radius: 5px;
}
.grid-item img{
  height: 100%;
  width: 100%;
}

.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }

JavaScript

// external js: isotope.pkgd.js

$('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 100
  }
});