Pembaharuan: Versi JavaScript mentah untuk arahan ini sudah tersedia.
Ini yakni 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 ibarat halnya ketika kita memakai plugin Masonry yang sebenarnya (yang sudah disempurnakan). Makara 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 ibarat ini:
$('#container').masonry();Tapi Saya sarankan untuk memicu plugin ini di dalam event .resize():
$(window).on("resize", function() { $('#container').masonry(); }).trigger("resize");Tambahan
Untuk pengaruh 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
Sumber https://www.dte.web.id/