Membuat Tampilan Masonry dengan Mudah - tiny-masonry.js

Demo Download

Rajakode.com - tiny-masonry.js adalah sebuah Javascript library minimalis yang berfungsi untuk membuat sebuah tampilan Masonry & Grid layout untuk website kamu.

Cara Memasang tiny-masonry.js

1. Upload Script tiny.masonry.js ke website kamu dan kamu siap untuk menggunakannya.

<script src="tiny-masonry.min.js"></script>

2. Tambahkan class "grid" dan "gridItem" kedalam HTML kamu.

<div class="grid">
  <div class"gridItem">Item 1</div>
  <div class"gridItem">Item 2</div>
  <div class"gridItem">Item 3</div>
  <div class"gridItem">Item 4</div>
  ...
</div>

3. Tentukan width elemen grid sesuai yang kamu inginkan.

.gridItem {
  width: 50%;
}

4. Initialize grid.

var grid = document.querySelector(".grid")
new TinyMasonry(grid)