https://www.marketing-boerse.de/vendor/jquery.image_grid/pinterest_grid.js

1/*
2    Pinterest Grid Plugin
3    Copyright 2014 Mediademons
4    @author smm 16/04/2014
5
6    usage:
7
8     $(document).ready(function() {
9
10        $('#blog-landing').pinterest_grid({
11            no_columns: 4
12        });
13
14    });
15
16
17*/
18;(function ($, window, document, undefined) {
19    var pluginName = 'pinterest_grid',
20        defaults = {
21            padding_x: 10,
22            padding_y: 10,
23            no_columns: 3,
24            margin_bottom: 50,
25            padding_top: 10,
26            single_column_breakpoint: 700
27        },
28        columns,
29        $article,
30        article_width;
31
32    function Plugin(element, options) {
33        this.element = element;
34        this.options = $.extend({}, defaults, options) ;
35        this._defaults = defaults;
36        this._name = pluginName;
37        this.init();
38    }
39
40    Plugin.prototype.init = function () {
41        var self = this,
42            resize_finish;
43
44        $(window).resize(function() {
45            clearTimeout(resize_finish);
46            resize_finish = setTimeout( function () {
47                self.make_layout_change(self);
48            }, 11);
49        });
50
51        self.make_layout_change(self);
52
53        setTimeout(function() {
54            $(window).resize();
55        }, 500);
56    };
57
58    Plugin.prototype.calculate = function (single_column_mode) {
59        var self = this,
60            tallest = 0,
61            row = 0,
62            $container = $(this.element),
63            container_width = $container.width();
64            $article = $(this.element).children();
65
66        if(single_column_mode === true) {
67            article_width = $container.width() - self.options.padding_x;
68        } else {
69            article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns;
70        }
71
72        $article.each(function() {
73            $(this).css('width', article_width);
74        });
75
76        columns = self.options.no_columns;
77
78        $article.each(function(index) {
79            var current_column,
80                left_out = 0,
81                top = 0,
82                $this = $(this),
83                prevAll = $this.prevAll(),
84                tallest = 0;
85
86            if(single_column_mode === false) {
87                current_column = (index % columns);
88            } else {
89                current_column = 0;
90            }
91
92            for(var t = 0; t < columns; t++) {
93                $this.removeClass('c'+t);
94            }
95
96            if(index % columns === 0) {
97                row++;
98            }
99
100            $this.addClass('c' + current_column);
101            $this.addClass('r' + row);
102
103            prevAll.each(function(index) {
104                if($(this).hasClass('c' + current_column)) {
105                    top += $(this).outerHeight() + self.options.padding_y;
106                }
107            });
108
109            if(single_column_mode === true) {
110                left_out = 0;
111            } else {
112                left_out = (index % columns) * (article_width + self.options.padding_x);
113            }
114
115            $this.css({
116                'left': left_out,
117                'top' : self.options.padding_top + top
118            });
119        });
120
121        this.tallest($container);
122        $(window).resize();
123    };
124
125    Plugin.prototype.tallest = function (_container) {
126        var column_heights = [],
127            largest = 0;
128
129        for(var z = 0; z < columns; z++) {
130            var temp_height = 0;
131            _container.find('.c'+z).each(function() {
132                temp_height += $(this).outerHeight();
133            });
134            column_heights[z] = temp_height;
135        }
136
137        largest = Math.max.apply(Math, column_heights);
138        _container.css('height', largest + (this.options.padding_y + this.options.margin_bottom));
139    };
140
141    Plugin.prototype.make_layout_change = function (_self) {
142        if($(window).width() < _self.options.single_column_breakpoint) {
143            _self.calculate(true);
144        } else {
145            _self.calculate(false);
146        }
147    };
148
149    $.fn[pluginName] = function (options) {
150        return this.each(function () {
151            if (!$.data(this, 'plugin_' + pluginName)) {
152                $.data(this, 'plugin_' + pluginName,
153                new Plugin(this, options));
154            }
155        });
156    }
157
158})(jQuery, window, document);