自適應邊距，利用全寬 - iTunes專輯網格樣式

Question

我正在製作一個Web應用程序，其中將顯示大量縮略圖。當在網格中顯示專輯時，我希望實現iTunes中使用的行爲縮略圖（而不是Coverflow）。這個想法是，縮略圖具有固定的大小，而容器div具有流體寬度。儘可能多的縮略圖應該放在一行中，並且縮略圖之間的邊距應該是自適應的，這樣縮略圖總是佔據容器寬度的100％。

見下面兩個圖中：

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

如果可以用CSS來實現這一目標，那就是最好的，否則我將不勝感激的JavaScript/jQuery的解決方案，以及。

Answer 1

對Alex給出的腳本做了一些小的改進，以完全滿足我的需求。現在每行的第一個縮略圖沒有左邊距，每行的最後一個縮略圖沒有右邊距，所以縮略圖確實使我們看到了容器div的全部寬度。還使用jQuery的.outerWidth（）而不是.width（）來檢索縮略圖的寬度，以便在不影響計算的情況下使用邊框等。現在，腳本也會在DOM加載後立即運行，從頭開始計算適當的邊距，而不僅僅是在窗口重新調整大小時。

這裏是新的腳本：

<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

我們可以使用css，這裏的代碼是http://jsfiddle.net/yuliantoadi/SMNWt/，那是什麼意思？

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> 

Answer 3

按照承諾我已經編寫這件事給你。它使用以下的jQuery，評估所需的保證金：

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/

先出手運行。 :)