https://justice.gc.ca/js/jquery.indymasonry.js

1(function ($, undefined) {
2
3	'use strict';
4
5	/*
6	 *DENNY K.
7	 *indyMasonry object.
8	 */
9
10	$.indyMasonry = function (element, options) {
11
12		this.$el = $(element);
13		this._init(options);
14
15	};
16
17	$.indyMasonry.defaults = {
18
19		'clName': '.indy-masonry',
20		'gap': 20,
21		'mTop': 10,
22		'mBottom': 10,
23		'column': 4,
24
25	};
26
27	$.indyMasonry.prototype = {
28
29
30		_init: function (options) {
31
32			var
33				_self = this,
34				element = _self.$el;
35
36
37			_self._masonryCallback(options);
38
39
40		},
41
42		_newElement: function () {
43
44			var
45				_self = this,
46				element = _self.$el,
47				elSet = _self.elSet,
48				newEl = element.find(_self.options.clName).not(elSet);
49
50			_self._elementPosition(newEl);
51
52			_self.elSet = _self.elSet.add(newEl);
53
54
55		},
56
57		_masonryCallback: function (options) {
58
59			var
60				_self = this,
61				element = _self.$el,
62				cssPosition = element.css('position');
63
64			_self.options = $.extend(true, {}, $.indyMasonry.defaults, options);
65
66			_self.columnCount = _self.options.column;
67			_self.columnDelta = _self.options.column - 1;
68			_self.gap = _self.options.gap;
69			_self.mTop = _self.options.mTop;
70			_self.mBottom = _self.options.mBottom;
71			_self.elSet = element.find(_self.options.clName);
72			_self.columnWidth = Math.floor((element.width() - (_self.gap * _self.columnDelta)) / _self.columnCount);
73			_self.containerBottom = 0;
74			_self.positionArray = [];
75
76			for (var i = 0; i <= _self.columnDelta; i++) {
77
78				_self.positionArray[i] = 0;
79
80			}
81
82			/*if (!cssPosition || cssPosition === 'static') {
83				element.css('position', 'relative');
84			}
85
86
87			_self._elementPosition(_self.elSet);*/
88
89		},
90
91		_elementPosition: function (elSet) {
92
93
94			var
95				_self = this,
96				count = elSet.length;
97
98			elSet.each(function (index) {
99
100
101				var
102					element = $(this),
103					leftValue, countDelta, elementHeight, minBottom;
104
105				/*element.css({
106
107					'width': _self.columnWidth + 'px',
108					'margin-top': _self.mTop + 'px',
109					'margin-bottom': _self.mBottom + 'px',
110
111				})*/
112
113				countDelta = 0;
114				elementHeight = element.outerHeight(true);
115				minBottom = _self.positionArray[countDelta] + elementHeight;
116
117
118				for (var i = 0; i <= _self.columnDelta; i++) {
119
120					var newBottom = _self.positionArray[i] + elementHeight;
121
122					if (newBottom < minBottom) {
123
124						minBottom = newBottom;
125						countDelta = i;
126
127					}
128
129				}
130
131
132				leftValue = (_self.columnWidth + _self.gap) * countDelta;
133
134				/*element.css({
135
136					'top': _self.positionArray[countDelta] + 'px',
137					'left': leftValue + 'px',
138					'position': 'absolute',
139
140				});*/
141
142				_self.positionArray[countDelta] = minBottom;
143
144
145				if (!--count) {
146					_self._containerHeight(index);
147				}
148
149
150			});
151
152		},
153
154		_containerHeight: function (index) {
155
156			var
157				_self = this,
158				element = _self.$el;
159
160
161			_self.containerBottom = _self.positionArray[0];
162
163			for (var i = 0; i <= _self.columnDelta; i++) {
164
165				if (_self.positionArray[i] > _self.containerBottom) {
166					_self.containerBottom = _self.positionArray[i];
167				}
168
169			}
170
171			/*element.css({
172
173				'height': _self.containerBottom + 'px'
174
175			});*/
176
177
178		},
179
180	};
181
182
183	$.fn.indyMasonry = function (options) {
184
185
186		var args = Array.prototype.slice.call(arguments, 1);
187		return this.each(function () {
188			var item = $(this),
189				instance = item.data('indyMasonry');
190			if (!instance) {
191
192				item.data('indyMasonry', new $.indyMasonry(this, options));
193
194			} else {
195
196				if (typeof options === 'string') {
197					instance[options].apply(instance, args);
198				}
199			}
200		});
201
202
203	};
204
205})(jQuery);
206
207
208		jQuery(function ($) {
209
210			var
211			container 	= $('#indy-masonry'),
212			button 		= $('#add'),
213			html 		= container.html();
214
215
216			$(window).load(function() {
217
218				container
219				.indyMasonry()
220				.indyFadeBox({
221
222					'clName' : '.indy-masonry'
223
224				});
225
226				$('body')
227				.removeClass('preload');
228
229			});
230
231			button.on('click', function() {
232
233
234				container
235				.append(html)
236				.indyMasonry('_newElement')
237				.indyFadeBox('_newElement');
238
239			});
240
241
242		});