Mecha versi 2.6.3 sudah dirilis!

Plugin Dasar jQuery Masonry

Tabel Konten
  1. Penggunaan 
  2. Tambahan 
    1. CSS 
    2. HTML 

Pembaharuan: Versi JavaScript mentah untuk kode ini sudah tersedia.

Desandro

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:

  1. Lebar setiap item harus sama
  2. Tidak ada fitur posisi di tengah secara otomatis.

Lihat Demo


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.

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'..

www.choerull.blogspot.com

Komentar telah ditutup.