Simple Masonry Grid Layout - simple-masonry.js

Demo Download

Raja Kode - simple-masonry.js adalah sebuah library Javascript ringan, responsive, mobile-friendly yang bisa membantu kamu untuk membuat layout Masonry grid menggunakan CSS flexbox.

Cara memasang simple-masonry.js

1. Upload dan muat simple-masonry.css & simple-masonry.js di dokumen website kamu.

<link rel="stylesheet" href="simple-masonry.css" />
<script src="simple-masonry.js"></script>
<!-- IE 11 Support -->
<script src="simple-masonry-ie11.js"></script>

2. Buat HTML unordered list untuk Masonry grid layout.

<ul class="js-masonry-list">
  <li class="js-masonry-elm">
    <img src="1.jpg" alt="" width="400" height="300" />
  </li>
  <li class="js-masonry-elm">
    <img src="2.jpg" alt="" width="400" height="300" />
  </li>
  <li class="js-masonry-elm">
    <img src="3.jpg" alt="" width="400" height="300" />
  </li>
  ....
</ul>

3. Inisialisasi tata letak grid Masonry.

masonry({
  // options here
});

4. Set nomer columns. Default: 1.

masonry({
  column: 5
});

5. Kamu juga dapat menentukan jumlah kolom untuk setiap resolusi layar.

masonry({
  responsive: [{
    breakpoint: 1024, 
    column: 3
  }, {
    breakpoint: 600,
    column: 2
  }, {
    breakpoint: 450,
    column: 1
  }]
});

6. Default CSS selectors.

masonry({
  target: '.js-masonry-list',
  activeClass: 'is-active',
  listClass: '.js-masonry-list', 
  listElmsClass: '.js-masonry-elm',
});

Changelog:

03/11/2022

• Bugfix