Buat catatan pribadi. Udah pernah dicatat -di twitter! 😀 -, dipraktek sedikit. Pas ketemu pekerjaan semisal lupa, pake script apa ya kemarin namanya hehe.
Pinterest itu kan layoutnya semacam float: left berkelanjutan atau mungkin display: inline ( gak lihat sourcenya), tapi kalo cuma diterapin secara CSS ngefloat gitu, gak mungkin hasilnya bisa bertumpuk rapi, padahal heightnya beda-beda. Pada umumnya kolom berjejer float left gini bakal dibikin height rata atau semacam itu.
Nah, kuncinya di jQuery Masonry ini.
Dari diskusi yang ada di sini, ada yang ngasih saran bisa juga sebenarnya pake CSS3. Tapi ada kekurangannya.
Kode CSS-nya:
.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
Tutorialnya ada di sini.
Ada juga yang ngasih saran pake kode ini
div.tile {
display: inline-block;
vertical-align: top;
}
Contoh penerapannya bisa dilihat di sini. Lumayan ya kayanya. Belum nyoba. Baru sekedar nyatet ni sekarang.Yang lagi belajar, yuk belajar sama-sama :).
