Easily Create Dynamic Grid Layout With FreeWall

If you are familiar with Windows 8 or Pinterest, you know of the dynamic grid layout. A dynamic grid is a layout where you can rearrange and reposition child elements as required or when you have your browser resized. A popular jQuery plugin used to create this layout is jQuery Masonry but if you want more options and even animation, check out FreeWall.

FreeWall is a free jQuery plugin from Minh Nguyen which you can use to create many grid layout types: flexible layout, metro style layout, nested grids, image layout and fluid grid. It also has support for responsive design so you can display your site in desktop, mobile or tablet.

On top of that it also has very nice CSS animations and callback events like onGapFound, onComplete, onResize and onSetBlock.

Getting started

To get started with FreeWall you need to include the jQuery or Zepto framework. In this basic guide, we’re going to use jQuery as an example to make a normal grid layout demo.

Now let’s first include the jQuery framework as well as the FreeWall plugin with the following code.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/freewall.js"></script>

We will display some brick pieces for the container of the layout.

<h2>Normal grid</h2>
<div class="free-wall">
	<div class="brick size320"></div>
	<div class="brick size320"></div>
	<div class="brick size320"></div>
	<div class="brick size320"></div>
	<div class="brick size320"></div>
	<div class="brick size320"></div>
</div>

And define our brick sizes with the width and height values of 320px using the style rule below:

.size320 {
	width: 320px;
	height: 320px;
}

Now, to add some javascript code.

Make It Work

To give random colors to the bricks, we’ll define some color arrays and apply them to the bricks using the Math.random() method like so.

var colour = [
	"rgb(142, 68, 173)",
	"rgb(243, 156, 18)",
	"rgb(211, 84, 0)",
	"rgb(0, 106, 63)",
	"rgb(41, 128, 185)",
	"rgb(192, 57, 43)",
	"rgb(135, 0, 0)",
	"rgb(39, 174, 96)"
];

$(".free-wall .size320").each(function() {
	var backgroundColor = colour[colour.length * Math.random() << 0];
	var bricks = $(this).find(".brick");
	!bricks.length && (bricks = $(this));
	bricks.css({
		backgroundColor: backgroundColor
	});
});

Lastly, we’re going to add functions to make the layout display well. Here is what makes FreeWall great. It has some options and methods to control the behaviour of the grid. The options offered by FreeWall are:

animate : true, // True to make block move with animation.
block.flex : true, // True to made block can resize a bit to fit.
cell.width : number,
cell.height : number,
fillGap : true, // True will made layout without gap.
gutter : mixed, // The spacing between the blocks.
selector : string, // Get all blocks to made layout.

Let’s call the plugin using the following code.

$(function() {
	$(".free-wall").each(function() {
		var wall = new freewall(this);
		wall.reset({
			selector: '.size320',
			cellW: function(container) {
				var cellWidth = 320;
				if (container.hasClass('size320')) {
					cellWidth = container.width()/2;
				}
				return cellWidth;
			},
			cellH: function(container) {
				var cellHeight = 320;
				if (container.hasClass('size320')) {
					cellHeight = container.height()/2;
				}
				return cellHeight;
			},
			fixSize: 0,
			gutterY: 20,
			gutterX: 20,
			onResize: function() {
				wall.fitWidth();
			}
		})
		wall.fitWidth();
	});
	$(window).trigger("resize");
});

As you can see in the above function code, we use some of the FreeWall option, method and event. Like fixSize, gutterY, gutterX, onResize and fitWidth. If you want to use another option, method or event you can find the documentation in the FreeWall official homepage.

Now you can see the dynamic grid layout in action in the demo page. If you resize your browser, the bricks will automatically be rearranged and resized.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail