我正试图想出一个脚本,该脚本将在浏览器上(宽度)有许多缩略图。我希望它能齐平,两边没有缝隙。缩略图应该总是相同的大小,我猜唯一的方法是改变每个图像之间的间距。但是有人能帮我吗?如果我的问题不清楚,请告诉我。
编辑:下面是一个例子:http://www.beautyineverything.com/
谢谢!
类似的东西?
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>sandbox</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
var MAX_IMAGE_WIDTH = 240;
$(function(){
$(window).resize(resizeImages).resize();
});
function resizeImages() {
var containerWidth = $('.imageContainer').innerWidth();
var numberOfImages = Math.ceil(containerWidth / MAX_IMAGE_WIDTH);
var imageWidth = Math.ceil(containerWidth / numberOfImages);
var imageWidthLast = containerWidth - (numberOfImages - 1) * imageWidth;
$('.imageContainer .image').css('width', imageWidth);
$('.imageContainer .image:nth-child(' + numberOfImages + 'n)').css('width', imageWidthLast);
$('.imageContainer .image').each(function(){
$(this).text($(this).innerWidth());
});
}
</script>
<style type='text/css'>
.imageContainer {
border:1px solid black;
overflow:hidden;
}
.image {
width:160px;
height:160px;
float:left;
}
</style>
</head>
<body>
<div class='imageContainer'>
<?php
for ( $n = 10; $n < 30; ++$n) {
$backgroundColor = '#' . sprintf('%02x%02x%02x', $n * 8, $n * 8, $n * 8);
echo "<div class='image' style='background-color:{$backgroundColor};'></div>";
}
?>
</div>
</body>
</html>
调整图像大小可以用一种更聪明的方式编写,这样它们就可以是223+223+223+223+223+223+223+216
而不是223+222+222+222+222+222+222+222
。为此,每个列的宽度应单独计算,因此列的宽度仅相差1px。
这听起来可能很原始,但表只是为类似的东西而设计的。一个解决方案是有一个表格,并将您的图像作为细胞的背景图像。(或者把它放在里面,给它100%的高度和宽度)它很容易控制单元格大小和边距/填充。。这就是为什么它们在结构方面如此受欢迎。
在排除这个想法之前,请注意(除了我讨厌使用表来设计和定位东西,但不要犹豫是否要使用它)制作表将减少要编写的代码量。使用css调整单元格和表格的大小。使用内联来放置背景图像。没有js函数是wat。
如果你不同意我是否遗漏了什么,请发表评论:)