Adaptive margin, make use of full width - iTunes album grid style

Question

I'm working on a web app where a large number of thumbnails will be displayed. I would like to achieve the behavior used in iTunes when displaying albums as thumbnails in a grid (not Coverflow). The idea is that the thumbnails have a fixed size, while the container div has a fluid width. As many thumbnails as possible should be fit in one row, and the margin between the thumbnails should be adaptive so that the thumbnails always take up 100% width of the container.

See the two images below:

Four thumbnails making use of the full width

A slightly smaller window where three thumbnails fit, still taking up the full width by increasing the margin

If it is possible to achieve this with CSS, that is preferable, otherwise I would appreciate JavaScript/jQuery solutions as well.

Answer 1

Made some small improvements to the script given by Alex, to fully suit my needs. Now the first thumbnail on each row doesn't get a left-margin, and the last thumbnail on each row doesn't get a right-margin, so that the thumbnails really make us of the full width of the container div. Also used jQuery's .outerWidth() instead of .width() to retrieve the width of the thumbnail, so that you can use borders etc. without compromising the calculation. Now the script also run as soon as the DOM is loaded, to calculate the proper margin from the beginning, and not only when the window is re-sized.

Here's the new script:

<script type="text/javascript">
$(document).ready(calculateThumbnailMargin);
$(window).resize(calculateThumbnailMargin);

function calculateThumbnailMargin() {

    // Define a minimum margin
    var minimumMargin = 20;

    // Get the outer width of the thumbnail (including padding and border)
    var thumbWidth = $('.video-thumbnail-container').outerWidth();

    // Calculate how man thumbnails can fit on one row
    var numberofdivs = $('#content-area').width() / thumbWidth;
    numberofdivs = Math.floor(numberofdivs).toFixed(0);

    if (numberofdivs >= $('.video-thumbnail-container').size()) {
        numberofdivs = $('.video-thumbnail-container').size();
    };

    // Calculate the remaining width of the row  
    var widthleft = $('#content-area').width() - (thumbWidth * numberofdivs);

    // Calculate the proper margin to use
    var margin = (widthleft / (numberofdivs - 1)) / 2;

    // Check that the margin is not less than the minimum margin
    if (margin < minimumMargin) {
        // Use one less thumnail on each row
        numberofdivs = numberofdivs - 1;

        // Calculate the remaining width of the row  
        widthleft = $('#content-area').width() - (thumbWidth * (numberofdivs));

        // Calculate the proper margin to use
        margin = (widthleft / (numberofdivs - 1)) / 2;
    }

    // Add the proper margin to each thumbnail
    $('.video-thumbnail-container').attr('style', 'margin-left:' + margin + 'px; margin-right:' + margin + 'px');

    // Remove the left-margin on the first thumbnail on each row and the right-margin on the last thumbnail on each row
    for (i = 0; i < $('.video-thumbnail-container').size(); i = i+numberofdivs) {
        $(".video-thumbnail-container:eq(" + i + ")").css('marginLeft', 0);
        $(".video-thumbnail-container:eq(" + (i + numberofdivs - 1) + ")").css('marginRight', 0);
    }
}

Answer 2

As promised i have coded this up for you. It uses the following jquery, to evaluate the margin required:

var thewidth = 0;
$('.album').each(function(){
   thewidth = thewidth +  $(this).width();
});

var numberofdivs = $('#coolio').width() / $('.album').width();
numberofdivs = Math.floor(numberofdivs).toFixed(0)
if (numberofdivs >= $('.album').size()){
    numberofdivs = $('.album').size();
};

var widthleft = $('#coolio').width() - ($('.album').width() * numberofdivs);

var margin = (widthleft / numberofdivs) / 2;
$('.album').attr('style', 'margin-left:'+margin+'px; margin-right:'+margin+'px');

http://jsfiddle.net/ajthomascouk/dMAdm/

Hit run first. :)

Answer 3

we can do it use css, here the code http://jsfiddle.net/yuliantoadi/SMNWt/, is that what you mean?

CSS:

.dsgnPgs { margin-top:25px; }
.dsgnPgs li { float:left; width:130px; height:130px; margin-left:10px; margin-bottom:10px; border:1px solid #a6a6a6; background:#e6e6e6; }
.dsgnPgs li:hover { background:#fff; }
.dsgnPgs li h2 { margin:0; padding:0; text-align:center; border:none; }
.dsgnPgs li h2 a { display:block; width:80%; height:70%; padding:20% 10% 10%; }

HTML:

<ul class="dsgnPgs">
    <li><h2><a href="" target="_blank">test</a></h2></li>
    <li><h2><a href="" target="_blank">Catalog</a></h2></li>
    ..
</ul>