我正在尝试减小缩略图的大小以使它们均匀地适合整个页面，但在不超过特定宽度的情况下仍然尽可能大。
以下代码是我能够实现的最接近的代码，问题是在某些宽度下，它并没有完全占据整个宽度。
我假设这是由于我对数学的理解不够充分，有人可以帮忙吗？ (另外，我对 Javascript 不是特别熟悉)。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style>
.thumb {
display: inline-block;
background-color: green;
margin: 4px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="thumbnails"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
<script>
var resizeThumbnails = function() {
var w = $('#thumbnails').width();
var thumbsPerRow = w / 208;
var thumbDiffer = 208 - (thumbsPerRow % 1) * 208;
var thumbSize = 208 - (thumbDiffer / Math.floor(thumbsPerRow));
var thumbSize = thumbSize - 8;
$("#thumbnails .thumb").width(thumbSize).height(thumbSize);
}
$(window).resize(resizeThumbnails);
$(window).ready(resizeThumbnails);
resizeThumbnails();
</script>
</body>
</html>
最佳答案
var resizeThumbnails = function() {
var w = $('#thumbnails').width();
var thumbsPerRow = Math.ceil(w / 208);
var thumbSize = Math.floor(w / thumbsPerRow) -8;
$("#thumbnails .thumb").width(thumbSize).height(thumbSize);
}
通过将容器宽度除以缩略图宽度并向上取整，计算出一行可以容纳多少个缩略图(因为我们添加了额外的缩略图以缩小其他缩略图的大小)。根据每行的数量重新计算缩略图大小。
关于jquery - 动态缩小缩略图大小，均匀占用空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8767195/