jquery.tile.js Demos

The lightest jQuery plugin to tile boxes.

$().tile();

Click this area to see the result of

$('.sample1').tile();
LARGE
small
Medium
small
small
LARGE
Medium
Medium
small
Medium
Medium
small
LARGE
Medium
Medium
small
LARGE
Medium
LARGE

$().tile(columns);

The parameter columns is number of columns.

Click this area to see the result of

$('.sample2').tile(4);
small
small
small
small
small
LARGE
Medium
Medium
small
Medium
Medium
small
LARGE
Medium
Medium
small
LARGE
Medium
LARGE
The latest version of jquery.tile.js
jquery.tile.js 2011/05/25 Download

Code of jquery.tile.js

 1 /**
 2  * Flatten height same as the highest element for each row.
 3  *
 4  * Copyright (c) 2011 Hayato Takenaka
 5  * Dual licensed under the MIT and GPL licenses:
 6  * http://www.opensource.org/licenses/mit-license.php
 7  * http://www.gnu.org/licenses/gpl.html
 8  * @author: Hayato Takenaka (http://urin.take-uma.net)
 9  * @version: 0.0.2
10 **/
11 ;(function($) {
12   $.fn.tile = function(columns) {
13     var tiles, max, c, h, last = this.length - 1, s;
14     if(!columns) columns = this.length;
15     this.each(function() {
16       s = this.style;
17       if(s.removeProperty) s.removeProperty("height");
18       if(s.removeAttribute) s.removeAttribute("height");
19     });
20     return this.each(function(i) {
21       c = i % columns;
22       if(c == 0) tiles = [];
23       tiles[c] = $(this);
24       h = tiles[c].height();
25       if(c == 0 || h > max) max = h;
26       if(i == last || c == columns - 1)
27         $.each(tiles, function() { this.height(max); });
28     });
29   };
30 })(jQuery);
Copyright © URIN HACK all rights reserved.