Last active
October 2, 2016 09:48
-
-
Save cs09g/3d79019485a9916d120800640229cb2d to your computer and use it in GitHub Desktop.
Pinterest style grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Pinterest Grid Plugin | |
Copyright 2014 Mediademons | |
@author smm 16/04/2014 | |
@modifier cs09g 02/10/2016 | |
@comment: | |
In the original source, the class of grid element was updated all the time when the page is resized or not. | |
I added one condition to check the page is resized. | |
Referenced from: http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html | |
usage: | |
$(document).ready(function() { | |
$('#blog-landing').pinterest_grid({ | |
no_columns: 4 | |
}); | |
}); | |
*/ | |
;(function ($, window, document, undefined) { | |
var pluginName = 'pinterest_grid', | |
defaults = { | |
padding_x: 10, | |
padding_y: 10, | |
no_columns: 3, | |
margin_bottom: 50, | |
single_column_breakpoint: 700 | |
}, | |
columns, | |
$article, | |
article_width; | |
function Plugin(element, options) { | |
this.element = element; | |
this.options = $.extend({}, defaults, options) ; | |
this._defaults = defaults; | |
this._name = pluginName; | |
this.init(); | |
} | |
var resizing = false; | |
Plugin.prototype.init = function () { | |
var self = this, | |
resize_finish; | |
$(window).resize(function() { | |
resizing = true; | |
clearTimeout(resize_finish); | |
resize_finish = setTimeout( function () { | |
self.make_layout_change(self); | |
resizing = false; | |
}, 11); | |
}); | |
self.make_layout_change(self); | |
setTimeout(function() { | |
$(window).resize(); | |
}, 500); | |
}; | |
Plugin.prototype.calculate = function (single_column_mode) { | |
var self = this, | |
tallest = 0, | |
row = 0, | |
$container = $(this.element), | |
container_width = $container.width(); | |
$article = $(this.element).children(); | |
if(single_column_mode === true) { | |
article_width = $container.width() - self.options.padding_x; | |
} else { | |
article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns; | |
} | |
$article.each(function() { | |
$(this).css('width', article_width); | |
}); | |
columns = self.options.no_columns; | |
$article.each(function(index) { | |
var current_column, | |
left_out = 0, | |
top = 0, | |
$this = $(this), | |
prevAll = $this.prevAll(), | |
tallest = 0; | |
if(single_column_mode === false) { | |
current_column = (index % columns); | |
} else { | |
current_column = 0; | |
} | |
if (resizing) { | |
// this part makes the class updating all the time | |
for(var t = 0; t < columns; t++) { | |
$this.removeClass('c'+t); | |
} | |
} | |
if(index % columns === 0) { | |
row++; | |
} | |
$this.addClass('c' + current_column); | |
$this.addClass('r' + row); | |
prevAll.each(function(index) { | |
if($(this).hasClass('c' + current_column)) { | |
top += $(this).outerHeight() + self.options.padding_y; | |
} | |
}); | |
if(single_column_mode === true) { | |
left_out = 0; | |
} else { | |
left_out = (index % columns) * (article_width + self.options.padding_x); | |
} | |
$this.css({ | |
'left': left_out, | |
'top' : top | |
}); | |
}); | |
this.tallest($container); | |
$(window).resize(); | |
}; | |
Plugin.prototype.tallest = function (_container) { | |
var column_heights = [], | |
largest = 0; | |
for(var z = 0; z < columns; z++) { | |
var temp_height = 0; | |
_container.find('.c'+z).each(function() { | |
temp_height += $(this).outerHeight(); | |
}); | |
column_heights[z] = temp_height; | |
} | |
largest = Math.max.apply(Math, column_heights); | |
_container.css('height', largest + (this.options.padding_y + this.options.margin_bottom)); | |
}; | |
Plugin.prototype.make_layout_change = function (_self) { | |
if($(window).width() < _self.options.single_column_breakpoint) { | |
_self.calculate(true); | |
} else { | |
_self.calculate(false); | |
} | |
}; | |
$.fn[pluginName] = function (options) { | |
return this.each(function () { | |
if (!$.data(this, 'plugin_' + pluginName)) { | |
$.data(this, 'plugin_' + pluginName, | |
new Plugin(this, options)); | |
} | |
}); | |
} | |
})(jQuery, window, document); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment