BrickWork - A reponsive jQuery plugin to create Dynamic layouts

BrickWork is a reponsive jQuery plugin to create Dynamic layouts. The main goal is to create the best and most customizable dynamic layouts plugins. When uglifid the code is15KB.

Supports

BrickWork supports almost all the browsers.

• Chrome
• Opera
• Safari
• IE 8.0+
• Firefox

sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: github.com

1. INCLUDE CSS AND JS FILES

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/iraycd/brickwork/master/brickwork.js"></script>

2. HTML

<div id="brickwork" class="brick-work"></div>

3. JAVASCRIPT

var temp = "<div class='cell' style='width:{width}px; height:{height}px; background-image: url(http://lorempixel.com/300/300/{type}/{index}/)'></div>";
var w = 200, h = 200, html = '', limitItem = 20;

var type = "abstract animals business cats city food nightlife fashion people nature sports transport".split(" ");
for (var i = 0; i < limitItem; ++i) {
	index = 1 + 10 * Math.random() << 0;
	html += temp
		.replace(/\{height\}/g, h)
		.replace(/\{width\}/g, w)
		.replace("{index}", index)
		.replace("{type}",type[type.length * Math.random() << 0]);
}
$("#brickwork").html(html);

var brick = new brickwork("#brickwork");
brick.reset({
	selector: '.cell',
	animate: false,
	cellW: 200,
	cellH: 200,
	delay: 50,
	onResize: function() {
	  ebrick.fitWidth();
	}
});
brick.fitWidth();