Teknik Masonry dengan CSS3
Bagi mereka yang belum mengenal jQuery Masonry, pada dasarnya plugin ini membantu untuk membuat floating elemen secara vertikal. Apakah CSS tidak bisa melakukannya? Sederhana saja: tidak ada model CSS untuk pengaturan layout secara vertikal. Anda boleh mencoba teknik floating, positioning, inline display, tapi percayalah Anda akan sulit menemukan solusi untuk masalah ini.
Hingga kemudian muncul satu ide di kepala: CSS Columns! Solusinya sangat sederhana, karena memang metode ini dibuat untuk mendapatkan tampilan seperti surat kabar, melalui CSS. Anda akan mendapatkan tampilan yang sama jika menggunakan jQuery Masonry. Pemakaiannya juga sangat mudah, lihat kode berikut:
Siapkan container dan konten di dalamnya:
<div> <a href="#">Masukkan apapun di sini, teks, gambar, video, apapun.</a> ...dan sebagai-nya dan seterusnya. </div>
Kemudian gunakan senjata ampuhnya pada CSS:
div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px;
}
div a{
display: inline-block; /* Display inline-block, tidak perlu floating sama sekali! */
margin-bottom: 20px;
width: 100%; }
Fakta menariknya adalah: lebar dari elemen-elemen dalam setiap kolom tidak relatif terhadap lebar parent element-nya, melainkan lebar kolom itu sendiri. Dalam kasus contoh di atas width: 100% akan diterjemahkan menjadi 150px, bukan 480px (lebar parent).
Fallback dan Kompatibilitas Browser
Tentu saja, teman-teman kita di Microsoft telah ‘berbaik hati’ untuk tidak mendukung fitur CSS Columns ini *capede*. Bahkan hingga versi IE9! Dalam hal ini, saya sarankan untuk mencoba plugin jQuery Masonry dengan conditional comment:
<!--[if lte IE 9]> < script type="text/javascript" src="js/jquery.masonry.min.js">< /script> <![endif]-->
Tanpa perlu dibahas lagi, teknik ini bekerja (dengan sangat baik) di browser Gecko dan WebKit (Mozilla, Chrome, Safari) . Sedikit keanehan terjadi pada browser Opera. Kolom dapat disusun dengan baik, tapi biasanya muncul bug pada gap setiap kolomnya.
Lihat demonya: CSS3 Masonry
Sumber: http://sickdesigner.com
