https://www.shizaifarm.com/Content/web/js/jquery.jMosaic.js

1/*
2 * jQuery jMosaic plugin 0.1.3 
3 * https://github.com/absentik/jMosaic
4 * 
5 * Author: Seleznev Alexander (ABSENT) 
6 * Email: [email protected] 
7 * Website: http://whoisabsent.ru 
8 *  
9 * Licensed under the MIT license. 
10 * http://www.opensource.org/licenses/mit-license.php 
11 */
12; (function ($, window, document, undefined) {
13	var pluginName = "jMosaic";
14	var defaults = {
15		items_type: "img", // Type of elements in the selector 
16		min_row_height: 150,  // Minimal row height 
17		margin: 0, // Space between elements 
18		is_first_big: false // First row - largest 
19	}
20
21	function jMosaic(element, options) {
22		this.element = element;
23		this._defaults = defaults;
24		this._name = pluginName;
25		this.options = $.extend({}, defaults, options);
26		this.action = typeof options === "string" ? options : "default";
27		
28		this.init();
29	}
30
31	jMosaic.prototype.start = function() {
32		var it = this;
33		var numRow = 0;
34		var classWidth = 0;
35		var selectorLength = $(it.element).find(it.options.items_type).length;
36
37		this.clear();
38		
39		if (it.options.is_first_big) {
40			it.reverseItems();
41		}
42
43		$(it.element).addClass("jMosaic-selector");
44		
45		$(it.element).find(it.options.items_type).each(function(i) { 
46			$(this).addClass("jMosaic-item");
47			var newwidth = 	it.itemNewWidth(this, it.options.min_row_height);
48			$(this).removeAttr("width").removeAttr("height").css({"width": newwidth+"px", "height": it.options.min_row_height+"px", "margin": it.options.margin+"px"});		
49
50			var prevTop = $(this).prev().position();
51			if (prevTop != undefined)
52			    prevTop = prevTop.top;
53
54			if (i == 0 || $(this).position().top == prevTop) {
55				classWidth += $(this).outerWidth(true);
56			}
57			else {
58				it.stretchingRow(".jMosaic-row_" + numRow, classWidth);
59				classWidth = $(this).outerWidth(true);
60				numRow++;
61			}
62			$(this).addClass("jMosaic-row_" + numRow);
63			if (i == selectorLength - 1) {
64				it.stretchingRow(".jMosaic-row_" + numRow, classWidth);	
65			}
66		});
67		
68		if (it.options.is_first_big) {
69			it.reverseItems();
70		}
71
72		$(it.element).append("<div class='jMosaic-clear'></div>");
73	};
74
75	jMosaic.prototype.clear = function() {
76		var it = this;
77		$(it.element).find(".jMosaic-item").each(function(i) { 
78			$(this)[0].className = $(this)[0].className.replace(/\bjMosaic-row_.*?\b/g, '');
79		});
80		$(it.element).find(".jMosaic-item").removeClass("jMosaic-item");
81		$(it.element).find(".jMosaic-clear").remove();
82		$(it.element).removeClass("jMosaic-selector");
83	};
84
85	jMosaic.prototype.stretchingRow = function(className, classWidth) {
86		var it = this;
87		var classHeight = $(it.element).find(className).outerHeight(true);
88		var requiredWidth = $(it.element).width() - 1; /* scrollbar fix (for relative selector width) */
89		var requiredHeight = classHeight / classWidth * requiredWidth;
90		var resultWidth = 0;
91		var lastElementWidth = 0;
92
93		$(it.element).find(className).each(function(i) {
94			$(this).width(it.itemNewWidth(this, (requiredHeight - it.options.margin*2)));
95			resultWidth += $(this).outerWidth(true);
96		});
97		$(it.element).find(className).height(requiredHeight - it.options.margin*2);
98		
99		lastElementWidth = $(it.element).find(className).last().outerWidth(true) + (requiredWidth - resultWidth) - it.options.margin*2;
100		$(it.element).find(className).last().width(lastElementWidth);
101	};
102
103	jMosaic.prototype.itemNewWidth = function(item, newheight) {
104		var width = typeof($(item).attr("width")) != 'undefined' ? $(item).attr("width") : $(item).width();
105		var height = typeof($(item).attr("height")) != 'undefined' ? $(item).attr("height") : $(item).height();
106		var prop = width / height;
107		var newwidth = newheight * prop;
108		return Math.round(newwidth);
109	};
110
111	jMosaic.prototype.reverseItems = function() {
112		var it = this;
113		var arr = $.makeArray($(it.element).find(it.options.items_type));
114		arr.reverse();
115		$(it.element).html(arr);
116	};
117
118
119	jMosaic.prototype.init = function() {
120		switch (this.action) {
121			case "clear":
122				return this.clear();
123			break;
124			default:
125				return this.start();
126			break;
127		}
128	};
129
130
131	$.fn[pluginName] = function(options) {
132		return this.each(function () {
133			$.data(this, 'plugin_' + pluginName, new jMosaic(this, options));
134		});
135	}
136
137
138})(jQuery, window, document);