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