Plugin Dasar JQuery Masonry

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