Skip to content

Instantly share code, notes, and snippets.

@arkadylukashov
Last active December 21, 2015 00:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arkadylukashov/6218172 to your computer and use it in GitHub Desktop.
Save arkadylukashov/6218172 to your computer and use it in GitHub Desktop.
Simple plugin that transform your inline-blocked item layout into a pinterest-like grid
/**
* 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));
/** @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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment