Simple plugin that transform your inline-blocked item layout into a pinterest-like grid

pinnize.js

/**
 * Plugin that transform ur inline-blocked grid into a
 * pinterest-like grid :)
 * @author arkadylukashov
 * @link https://gist.github.com/arkadylukashov/6218172
 */
;(function ($) {

  $.fn.pinnize = function(options) {
		
		var settings = $.extend({
			perline : 'auto', // 'auto' || any number
			childs : null, // null || any valid selector of childs
			logging : false,
		}, options);
		
		return this.each(function() {
		
			/* Set the perline counter */
			var perline = typeof settings.perline == 'number' ? settings.perline : Math.floor($(this).width() / $(this).children().first().width()), root = this;
			/* On each item */
			$(root).children(settings.childs).each(function(index) {
				/* Set item defaults */
					$(this).css({position: 'relative', top: 0});
				/* Get index of current item */
					var currentIndex = index + 1;
				/* Slice top row */
					if (currentIndex > perline) 
					{
						/* Index of the above item */
							var upperIndex = currentIndex - perline - 1;
						/* Get needed element item */
							var el = $(root).children(settings.childs).get(upperIndex);
						
						/* Logging */
							if (settings.logging) {
								console.group(currentIndex);
									console.log('Высота предыдущего: ',$(el).height() + $(el).position().top);
									console.log('Позиция текущая',$(this).position().top);
								console.groupEnd();
							}
						/* Calculate and set value */
							var num = $(this).position().top - ( $(el).height() + $(el).position().top ) - parseInt($(el).css('margin-bottom'));
							$(this).css({top: '-'+num+'px' });
					}
			})

		})
	}	
	
}(jQuery));

pinnize.min.js

/** @link https://gist.github.com/arkadylukashov/6218172 */
;(function(e){e.fn.pinnize=function(t){var n=e.extend({perline:"auto",childs:null,logging:false},t);return this.each(function(){var t=typeof n.perline=="number"?n.perline:Math.floor(e(this).width()/e(this).children().first().width()),r=this;e(r).children(n.childs).each(function(i){e(this).css({position:"relative",top:0});var s=i+1;if(s>t){var o=s-t-1;var u=e(r).children(n.childs).get(o);if(n.logging){console.group(s);console.log("Высота предыдущего: ",e(u).height()+e(u).position().top);console.log("Позиция текущая",e(this).position().top);console.groupEnd()}var a=e(this).position().top-(e(u).height()+e(u).position().top)-parseInt(e(u).css("margin-bottom"));e(this).css({top:"-"+a+"px"})}})})}})(jQuery)