Flexable galery

by LuckyCat

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Cupid.com - Find local singles on Cupid.com - an online dating site</title>
    </head>
    
    <body>

    <div class="tabs_content_block_grid_view">
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#f00"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#0f0"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#00f"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#ff0"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#0ff"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#f0f"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#500"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#050"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#005"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#550"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#055"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#505"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item" style="background:#900"></div>
        </div>
        <div class="grid_view__cell">
            <div class="gallery_list__item"...

CSS

html, body {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
body {
    background: #ccc;
}
.grid_view__cell {
    float: left;    
}
.gallery_list__item {
    /*float:left;*/
    margin: 0 auto;
    display: block;
    height: 80px;
    width: 80px;
    margin: 4px auto;
}

JavaScript

function recalc() {
    var parent = $('.tabs_content_block_grid_view').width();
    var box = $('.gallery_list__item').width();
    
    $('.gallery_list__item').css("margin-top", "");
    $('.gallery_list__item').css("margin-bottom", "");

    var boxMinMargin = parseInt($('.gallery_list__item').css('margin-top'));
    var columns = Math.floor(parent / (box + boxMinMargin * 2));
    var procent_width = 100 / columns;

    $('.grid_view__cell').width(procent_width + "%");    
    var margins = ($('.grid_view__cell').width() - box) / 2;
    if (margins < boxMinMargin) {
        margins = boxMinMargin;
    }
    $('.gallery_list__item').css('margin-top', margins);
    $('.gallery_list__item').css('margin-bottom', margins);
}


$(window).ready(function () {
    recalc();
});


$(window).resize(function () {
    recalc();
});