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.

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

    www.choerull.blogspot.com

Komentar telah ditutup.