├── README.md ├── css └── jquery.jMosaic.css ├── img ├── pics-001.jpg ├── pics-002.jpg ├── pics-003.jpg ├── pics-004.jpg ├── pics-005.jpg ├── pics-006.jpg ├── pics-007.jpg ├── pics-008.jpg ├── pics-009.jpg ├── pics-010.jpg ├── pics-011.jpg ├── pics-012.jpg └── pics-013.jpg ├── index.html ├── jMosaic.jquery.json └── js ├── jquery.jMosaic.js └── jquery.jMosaic.min.js /README.md: -------------------------------------------------------------------------------- 1 | jMosaic 2 | ======= 3 | 4 | ## ABOUT 5 | A lightweight jQuery plugin that can take a list of page elements and arrange them in a beautiful, tight-fitted tile mosaic grid. 6 | 7 | The proportions of the elements don't change. As the elements can be used: img, div, li etc. 8 | ![Demo](https://habrastorage.org/files/dbf/66f/c65/dbf66fc656424b4e8ada168a175612da.png) 9 | 10 | 11 | ## USAGE 12 | jMosaic plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header. 13 | 14 |

15 | <script src="js/jquery.js"></script>
16 | <script src="js/jquery.jMosaic.js"></script>
17 |

18 | 19 | 20 | Include the CSS file responsible to style the jMosaic plugin. 21 | 22 |

23 | <link rel="stylesheet" href="css/jquery.jMosaic.css"/ >
24 |

25 | 26 | Select a block which contains the necessary elements (`items_type`). 27 | 28 |

29 | <div class="pictures">
30 | 	<img src="img/one.jpg" width="267" height="400"/>
31 | 	<img src="img/two.jpg" width="500" height="350"/>
32 | 	. . .
33 | 	<img src="img/last.jpg" width="400" height="300"/>
34 | </div>	
35 |

36 | 37 | After it, call the jQuery jMosaic plugin. 38 | 39 |

40 | $('.pictures').jMosaic();
41 |

42 | 43 | For blocks or images of size, you can use `$(document).ready()`. 44 | 45 | If this image without attribute `width` or `heigh`, you can use `$(window).load()`. 46 | 47 | You can update on `$(window).resize()`. 48 | 49 | ### Options: 50 | You can pass an options object in plugin init method. 51 | * `items_type` : Type of elements in the selector (Default: `img`); 52 | * `min_row_height` : Minimal row height (Default: `150`); 53 | * `margin` : Space between elements (Default: `0`); 54 | * `is_first_big` : First row - largest (Default: `false`); 55 | 56 |

57 | $('.blocks').jMosaic({
58 |   items_type: "li", 
59 |   min_row_height: 200, 
60 |   margin: 3, 
61 |   is_first_big: true
62 | });
63 |

64 | 65 | ### Methods: 66 | `clear` : Clean up the selector from the plugin; 67 |

68 | $('.pictures').jMosaic('clear');
69 |

70 | 71 | ## EXAMPLE 72 | [View example](http://htmlpreview.github.io/?https://github.com/absentik/jMosaic/blob/master/index.html#example) 73 | -------------------------------------------------------------------------------- /css/jquery.jMosaic.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery jMosaic plugin 0.1.3 3 | * https://github.com/absentik/jMosaic 4 | * 5 | * Author: Seleznev Alexander (ABSENT) 6 | * Email: absenteg@gmail.com 7 | * Website: http://whoisabsent.ru 8 | * 9 | * Licensed under the MIT license. 10 | * http://www.opensource.org/licenses/mit-license.php 11 | */ 12 | 13 | .jMosaic-clear { clear: both; } 14 | .jMosaic-selector { clear: both; position: relative; } 15 | .jMosaic-selector > .jMosaic-item { display: block; float: left; position: relative; overflow: hidden; width: auto; } 16 | .jMosaic-selector > .jMosaic-item:hover, .jMosaic-selector > .jMosaic-item:focus { } 17 | -------------------------------------------------------------------------------- /img/pics-001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-001.jpg -------------------------------------------------------------------------------- /img/pics-002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-002.jpg -------------------------------------------------------------------------------- /img/pics-003.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-003.jpg -------------------------------------------------------------------------------- /img/pics-004.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-004.jpg -------------------------------------------------------------------------------- /img/pics-005.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-005.jpg -------------------------------------------------------------------------------- /img/pics-006.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-006.jpg -------------------------------------------------------------------------------- /img/pics-007.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-007.jpg -------------------------------------------------------------------------------- /img/pics-008.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-008.jpg -------------------------------------------------------------------------------- /img/pics-009.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-009.jpg -------------------------------------------------------------------------------- /img/pics-010.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-010.jpg -------------------------------------------------------------------------------- /img/pics-011.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-011.jpg -------------------------------------------------------------------------------- /img/pics-012.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-012.jpg -------------------------------------------------------------------------------- /img/pics-013.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/absentik/jMosaic/3d879269bd3283dd83d892abb2bb4ed08baf0296/img/pics-013.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | jMosaic - jQuery plugin for align elements 9 | 10 | 11 | 12 | 13 | 30 | 31 | 49 | 50 | 51 | 52 |

53 |

54 |

jMosaic

55 |

jQuery plugin for align elements.

56 |

57 | Download 58 | Github Page 59 |

60 |

61 |
62 |

About

63 |

A lightweight jQuery plugin that can take a list of page elements and arrange them in a beautiful, tight-fitted tile mosaic grid.
The proportions of the elements don't change. As the elements can be used: img, div, li etc.

64 |
65 |

Usage

66 |

jMosaic plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.

67 |

 68 | <script src="js/jquery.js"></script>
 69 | <script src="js/jquery.jMosaic.js"></script>
 70 |

71 |
72 |

Include the CSS file responsible to style the jMosaic plugin.

73 |

 74 | <link rel="stylesheet" href="css/jquery.jMosaic.css"/>
 75 |

76 |
77 |

Select a block which contains the necessary elements (items_type).

78 |

 79 | <div class="pictures">
 80 | 	<img src="img/one.jpg" width="267" height="400"/>
 81 | 	<img src="img/two.jpg" width="500" height="350"/>
 82 | 	. . .
 83 | 	<img src="img/last.jpg" width="400" height="300"/>
 84 | </div>	
 85 |

86 |
87 |

After it, call the jQuery jMosaic plugin.

88 |

 89 | $('.pictures').jMosaic();	
 90 |

91 |
92 |

For blocks or images of size, you can use $(document).ready().

93 |

If this image without attribute "width" or "heigh", you can use $(window).load().

94 |

You can update on $(window).resize().

95 |
96 |

Options:

97 |

items_type : Type of elements in the selector (Default: img);
min_row_height : Minimal row height (Default: 150);
margin : Space between elements (Default: 0);
is_first_big : First row - largest (Default: false).

103 |

104 | $('.blocks').jMosaic({
105 |   items_type: "li", 
106 |   min_row_height: 200, 
107 |   margin: 3, 
108 |   is_first_big: true
109 | });
110 |

111 |
112 |
113 |

Methods:

114 |

clear : Clean up the selector from the plugin;

117 |

118 | $('.pictures').jMosaic('clear');
119 |

120 |
121 |
122 |

Example

123 |
124 |

1. Pictures & fixed width:

125 |

126 |

127 |

128 |

129 |

130 |

131 |

132 |

133 |

134 |

135 |

136 |

137 |

138 |

139 |

140 |
141 |

2. Blocks & relative width:

142 |

153 |
154 |

155 |

ABSENT, 2014

156 |

157 | 158 | 159 | -------------------------------------------------------------------------------- /jMosaic.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jMosaic", 3 | "title": "jQuery jMosaic", 4 | "description": "A lightweight jQuery plugin that can take a list of page elements and arrange them in a beautiful, tight-fitted tile mosaic grid.", 5 | "keywords": [ 6 | "mosaic", 7 | "jMosaic", 8 | "images", 9 | "image", 10 | "elements", 11 | "element", 12 | "align", 13 | "responsive", 14 | "effect", 15 | "gallery" 16 | ], 17 | "version": "0.1.3", 18 | "author": { 19 | "name": "Seleznev Alexander", 20 | "email": "absenteg@gmail.com", 21 | "url": "http://whoisabsent.ru" 22 | }, 23 | "licenses": [ 24 | { 25 | "type": "MIT", 26 | "url": "http://www.opensource.org/licenses/mit-license.php " 27 | } 28 | ], 29 | "homepage": "https://github.com/absentik/jMosaic", 30 | "docs": "https://github.com/absentik/jMosaic/wiki", 31 | "bugs": "https://github.com/absentik/jMosaic/issues", 32 | "dependencies": { 33 | "jquery": ">=1.8" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /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: absenteg@gmail.com 7 | * Website: http://whoisabsent.ru 8 | * 9 | * Licensed under the MIT license. 10 | * http://www.opensource.org/licenses/mit-license.php 11 | */ 12 | 13 | ;(function($, window, document, undefined){ 14 | 15 | var pluginName = "jMosaic"; 16 | var defaults = { 17 | items_type: "img", // Type of elements in the selector 18 | min_row_height: 150, // Minimal row height 19 | margin: 0, // Space between elements 20 | is_first_big: false // First row - largest 21 | } 22 | 23 | function jMosaic(element, options) { 24 | this.element = element; 25 | this._defaults = defaults; 26 | this._name = pluginName; 27 | this.options = $.extend({}, defaults, options); 28 | this.action = typeof options === "string" ? options : "default"; 29 | 30 | this.init(); 31 | } 32 | 33 | jMosaic.prototype.start = function() { 34 | var it = this; 35 | var numRow = 0; 36 | var classWidth = 0; 37 | var selectorLength = $(it.element).find(it.options.items_type).length; 38 | 39 | this.clear(); 40 | 41 | if (it.options.is_first_big) { 42 | it.reverseItems(); 43 | } 44 | 45 | $(it.element).addClass("jMosaic-selector"); 46 | 47 | $(it.element).find(it.options.items_type).each(function(i) { 48 | $(this).addClass("jMosaic-item"); 49 | var newwidth = it.itemNewWidth(this, it.options.min_row_height); 50 | $(this).removeAttr("width").removeAttr("height").css({"width": newwidth+"px", "height": it.options.min_row_height+"px", "margin": it.options.margin+"px"}); 51 | if (i == 0 || $(this).position().top == $(this).prev().position().top) { 52 | classWidth += $(this).outerWidth(true); 53 | } 54 | else { 55 | it.stretchingRow(".jMosaic-row_" + numRow, classWidth); 56 | classWidth = $(this).outerWidth(true); 57 | numRow++; 58 | } 59 | $(this).addClass("jMosaic-row_" + numRow); 60 | if (i == selectorLength - 1) { 61 | it.stretchingRow(".jMosaic-row_" + numRow, classWidth); 62 | } 63 | }); 64 | 65 | if (it.options.is_first_big) { 66 | it.reverseItems(); 67 | } 68 | 69 | $(it.element).append("

"); 70 | }; 71 | 72 | jMosaic.prototype.clear = function() { 73 | var it = this; 74 | $(it.element).find(".jMosaic-item").each(function(i) { 75 | $(this)[0].className = $(this)[0].className.replace(/\bjMosaic-row_.*?\b/g, ''); 76 | }); 77 | $(it.element).find(".jMosaic-item").removeClass("jMosaic-item"); 78 | $(it.element).find(".jMosaic-clear").remove(); 79 | $(it.element).removeClass("jMosaic-selector"); 80 | }; 81 | 82 | jMosaic.prototype.stretchingRow = function(className, classWidth) { 83 | var it = this; 84 | var classHeight = $(it.element).find(className).outerHeight(true); 85 | var requiredWidth = $(it.element).width() - 1; /* scrollbar fix (for relative selector width) */ 86 | var requiredHeight = classHeight / classWidth * requiredWidth; 87 | var resultWidth = 0; 88 | var lastElementWidth = 0; 89 | 90 | $(it.element).find(className).each(function(i) { 91 | $(this).width(it.itemNewWidth(this, (requiredHeight - it.options.margin*2))); 92 | resultWidth += $(this).outerWidth(true); 93 | }); 94 | $(it.element).find(className).height(requiredHeight - it.options.margin*2); 95 | 96 | lastElementWidth = $(it.element).find(className).last().outerWidth(true) + (requiredWidth - resultWidth) - it.options.margin*2; 97 | $(it.element).find(className).last().width(lastElementWidth); 98 | }; 99 | 100 | jMosaic.prototype.itemNewWidth = function(item, newheight) { 101 | var width = typeof($(item).attr("width")) != 'undefined' ? $(item).attr("width") : $(item).width(); 102 | var height = typeof($(item).attr("height")) != 'undefined' ? $(item).attr("height") : $(item).height(); 103 | var prop = width / height; 104 | var newwidth = newheight * prop; 105 | return Math.round(newwidth); 106 | }; 107 | 108 | jMosaic.prototype.reverseItems = function() { 109 | var it = this; 110 | var arr = $.makeArray($(it.element).find(it.options.items_type)); 111 | arr.reverse(); 112 | $(it.element).html(arr); 113 | }; 114 | 115 | 116 | jMosaic.prototype.init = function() { 117 | switch (this.action) { 118 | case "clear": 119 | return this.clear(); 120 | break; 121 | default: 122 | return this.start(); 123 | break; 124 | } 125 | }; 126 | 127 | 128 | $.fn[pluginName] = function(options) { 129 | return this.each(function () { 130 | $.data(this, 'plugin_' + pluginName, new jMosaic(this, options)); 131 | }); 132 | } 133 | 134 | 135 | })(jQuery, window, document); -------------------------------------------------------------------------------- /js/jquery.jMosaic.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery jMosaic plugin 0.1.3 3 | * https://github.com/absentik/jMosaic 4 | * 5 | * Author: Seleznev Alexander (ABSENT) 6 | * Email: absenteg@gmail.com 7 | * Website: http://whoisabsent.ru 8 | * 9 | * Licensed under the MIT license. 10 | * http://www.opensource.org/licenses/mit-license.php 11 | */ 12 | 13 | ;(function(b,m,n,p){function d(a,e){this.element=a;this._defaults=k;this._name=f;this.options=b.extend({},k,e);this.action="string"===typeof e?e:"default";this.init()}var f="jMosaic",k={items_type:"img",min_row_height:150,margin:0,is_first_big:!1};d.prototype.start=function(){var a=this,e=0,c=0,l=b(a.element).find(a.options.items_type).length;this.clear();a.options.is_first_big&&a.reverseItems();b(a.element).addClass("jMosaic-selector");b(a.element).find(a.options.items_type).each(function(d){b(this).addClass("jMosaic-item"); 14 | var g=a.itemNewWidth(this,a.options.min_row_height);b(this).removeAttr("width").removeAttr("height").css({width:g+"px",height:a.options.min_row_height+"px",margin:a.options.margin+"px"});0==d||b(this).position().top==b(this).prev().position().top?c+=b(this).outerWidth(!0):(a.stretchingRow(".jMosaic-row_"+e,c),c=b(this).outerWidth(!0),e++);b(this).addClass("jMosaic-row_"+e);d==l-1&&a.stretchingRow(".jMosaic-row_"+e,c)});a.options.is_first_big&&a.reverseItems();b(a.element).append("

")}; 15 | d.prototype.clear=function(){b(this.element).find(".jMosaic-item").each(function(a){b(this)[0].className=b(this)[0].className.replace(/\bjMosaic-row_.*?\b/g,"")});b(this.element).find(".jMosaic-item").removeClass("jMosaic-item");b(this.element).find(".jMosaic-clear").remove();b(this.element).removeClass("jMosaic-selector")};d.prototype.stretchingRow=function(a,e){var c=this,d=b(c.element).find(a).outerHeight(!0),f=b(c.element).width()-1,g=d/e*f,h=0,d=0;b(c.element).find(a).each(function(a){b(this).width(c.itemNewWidth(this, 16 | g-2*c.options.margin));h+=b(this).outerWidth(!0)});b(c.element).find(a).height(g-2*c.options.margin);d=b(c.element).find(a).last().outerWidth(!0)+(f-h)-2*c.options.margin;b(c.element).find(a).last().width(d)};d.prototype.itemNewWidth=function(a,d){var c="undefined"!=typeof b(a).attr("width")?b(a).attr("width"):b(a).width(),f="undefined"!=typeof b(a).attr("height")?b(a).attr("height"):b(a).height();return Math.round(c/f*d)};d.prototype.reverseItems=function(){var a=b.makeArray(b(this.element).find(this.options.items_type)); 17 | a.reverse();b(this.element).html(a)};d.prototype.init=function(){switch(this.action){case "clear":return this.clear();default:return this.start()}};b.fn[f]=function(a){return this.each(function(){b.data(this,"plugin_"+f,new d(this,a))})}})(jQuery,window,document); --------------------------------------------------------------------------------