自适应边距，利用全宽-iTunes相册网格样式
|
我正在使用一个将显示大量缩略图的Web应用程序。我想实现在以网格形式（而非Coverflow）以缩略图形式显示相册时在iTunes中使用的行为。这个想法是缩略图的大小是固定的，而容器div的宽度是流体。一行中应容纳尽可能多的缩略图，并且缩略图之间的边距应自适应，以使缩略图始终占据容器宽度的100％。
请参见下面的两个图像：
四个缩略图利用了整个宽度
稍小的窗口，可容纳三个缩略图，但通过增加边距仍占据了整个宽度
如果可以使用CSS来实现这一点，那是可取的，否则我将不胜感激JavaScript / jQuery解决方案。
没有找到相关结果
已邀请:
3 个回复
款去芳尾脊
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\');泉秘胁
.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%; }<ul class=\"dsgnPgs\"> <li><h2><a href=\"\" target=\"_blank\">test</a></h2></li> <li><h2><a href=\"\" target=\"_blank\">Catalog</a></h2></li> .. </ul>嘘伪
<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); } }