Plugin Dasar jQuery Masonry
Tabel Konten
Pembaharuan: Versi JavaScript mentah untuk kode ini sudah tersedia.
Ini adalah sebuah plugin awal yang menjadi dasar dari jQuery Masonry. Plugin ini ditulis oleh Desandro di dalam gist GitHub dan Saya pikir ini cukup bermanfaat untuk sekedar menata layout seperti halnya saat kita menggunakan plugin Masonry yang sesungguhnya (yang sudah disempurnakan). Jadi Saya mencatat ulang kodenya di sini.
Saya sudah mengeditnya sedikit untuk beberapa keperluan:
(function($) {
// Finding min and max values in array
Array.prototype.min = function() {return Math.min.apply({},this);};
Array.prototype.max = function() {return Math.max.apply({},this);};
$.fn.masonry = function() {
this.each(function() {
var wall = $(this);
if (wall.children().length > 0) { // Check if the element has anything in it
if (wall.children('.masonry-wrap').length === 0) { // checks if the `.masonry-wrap` div is already there
wall.wrapInner('<div class="masonry-wrap"></div>');
}
var m_w = wall.children('.masonry-wrap'),
brick = m_w.children(),
b_w = brick.outerWidth(true),
c_c = Math.floor(m_w.width() / b_w),
c_h = [], this_col, i;
for (i = 0; i < c_c; i++) {
c_h[i] = 0;
}
m_w.css('position', 'relative');
brick.css({
'float':'none',
'position':'absolute',
'display':'block'
}).each(function() {
for (i = c_c - 1; i > -1; i--) {
if (c_h[i] == c_h.min()) {
this_col = i;
}
}
$(this).css({
'top':c_h[this_col],
'left':b_w * this_col
});
c_h[this_col] += $(this).outerHeight(true);
});
m_w.height(c_h.max()).parent().addClass('start-transition');
}
return this;
});
};
})(jQuery);
Penggunaan
Sebenarnya plugin ini cukup diterapkan dengan cara seperti ini:
$('#container').masonry();
Tapi Saya sarankan untuk memicu plugin ini di dalam event .resize()
:
$(window).on("resize", function() {
$('#container').masonry();
}).trigger("resize");
Tambahan
Untuk efek animasi, gunakan CSS transisi:
CSS
.start-transition .item {
-webkit-transition:top .7s ease .5s, left .7s ease .5s;
-moz-transition:top .7s ease .5s, left .7s ease .5s;
-ms-transition:top .7s ease .5s, left .7s ease .5s;
-o-transition:top .7s ease .5s, left .7s ease .5s;
transition:top .7s ease .5s, left .7s ease .5s;
}
HTML
<div id="container">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
...
...
</div>
Keterbatasan:
- Lebar setiap item harus sama
- Tidak ada fitur posisi di tengah secara otomatis.
Referensi: Early jQuery Masonry - gist:2208329
11 Komentar
Anonim
kok pas di zoom-out malah makin sempit yah margin antar boxnya
==► http://bangbungg.blogspot.com/
efek transisinya sih sudah jalan
Taufik Nurrohman
Kalau sudah memakai plugin yang asli tidak perlu memakai ini lagi. Ini cuma konsep paling mendasar sebelum plugin Masonry menjadi seperti yang sekarang.
Beben Koben
WOW kagak ngerti :Q
Kang Ismet
Emang jago si bapak satu ini... btw.. saya nemu blog yang mirip banget, punya siapa ya? cekidot idtutorplus.blogspot.com
Unknown
kayaknya idtutorplus.blogspot.com hasil kloning
karena mirip sekali... :p
saya lihat nama authornya dipostnya Najwa Rahman..
hebat tapi tidak creative.. :-a
Unknown
Cloningnya keren...
Sopala Multapa
Gila nih yg cloning .. tanpa meninggalkan satu peser pun pada tampilannya ...
Surga Kenari
boleh request dong mas Taufik.
buat background gambar dengan before dan after..
biar telihat lebih cool :-bd
Unknown
saya mah nyimak wae
Anonim
terima kasih atas artikelnya ini..
dan sekali lagi saya ucapkan terima kasih sudah mau berbagi :D
#Salam Silaturahmi dari saya ^_^
Choerul Nasyikin
Mas, Masang Jquerynya gimana yah..?
dimana tempatnya, kurang paham'..