jQuery Bricks Demo

by Florian Ferbach

HTML

<script src="https://rawgithub.com/floo51/jquery-bricks/master/jquery-bricks.js"></script>
<div id="container">
    <img src="http://placehold.it/225x600" />
    <img src="http://placehold.it/400x250" />
    <img src="http://placehold.it/317x170" />
    <img src="http://placehold.it/275x300" />
    <img src="http://placehold.it/127x300" />
    <img src="http://placehold.it/275x300" />
    <img src="http://placehold.it/127x75" />
    <img src="http://placehold.it/600x300" />
    <img src="http://placehold.it/317x475" />
    <img src="http://placehold.it/275x205" />
    <img src="http://placehold.it/95x300" />
    <img src="http://placehold.it/300x300" />
    <img src="http://placehold.it/275x300" />
    <img src="http://placehold.it/127x85" />
    <img src="http://placehold.it/375x85" />
    <img src="http://placehold.it/200x175" />
</div>

CSS

body {
    background-color:#AAA;
}
#container {
    font-size:0px;
}
#container img {
    margin:5px;
}

JavaScript

$(function(){
    $(window).resize(function(){
        $('#container').data('bricks').layout();
    });
    
    $('#container').bricks();
});