jQuery Bricks builds walls with your HTML elements.
First developed to mimic google+ albums image layout, it works with any HTML elements.
Demos :
- Import jQuery
- Import jquery-bricks.js for production / jquery-bricks.min.js for developpement
- Build your HTML
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery-bricks.js"></script>
</head>
<body>
<div id="container">
<img src="http://placehold.it/225x300" />
<img src="http://placehold.it/400x300" />
<img src="http://placehold.it/317x400" />
<img src="http://placehold.it/275x300" />
<img src="http://placehold.it/127x300" />
<img src="http://placehold.it/275x300" />
<img src="http://placehold.it/127x300" />
<img src="http://placehold.it/600x300" />
</div>
</body>
</html>- Items must be inline-blocks
- Container must have a 0px font-size to avoid spaces between items
#container {
font-size: 0px;
}
#container div.item{
display: inline-block;
}- Call bricks on ready
$(function(){
$('#container').bricks();
});bricks can be called with arguments :
- maxRowHeight : maximum row height in the wall
- itemSelector : jquery selector for the items
$(function(){
$('#container').bricks({
maxRowHeight: 100,
itemSelector: 'div.item'
});
});- layout : recomputes the layout (useful on resize, items added ...)
$('#container').data('bricks').layout();