三、 流动布局中的图像

在流动布局中开发者最关心的是处理图像和内容，它们需要一定的宽度。大多数情况下，我们希望我们的图像尽可能的大，至少在太小时应防止任何令人尴尬的空白，在固定宽度的布局中，可手动调整，客服这些问题很容易。但是，在流动布局中，图像区域的宽度是不断变化的，这些问题就在此出现了。

自动杂志版面设计

这个解决方案需要一些聪明的数学知识和PHP，在Harvey Kane 的 Automatic Magazine Layout 文章中有全面的解释（包括数学）和可下载的源代码。标题由图像在杂志中如何呈现来决定：有条理且总是完美对齐。当然，一本杂志版面的设计师都必须经过一定的过程来实现这种效果，包括调整和手动放置。

对我们来说，这一技巧可以实现我们的效果，下面是脚本实现这一效果的第一个例子。

正如你所看到的那样，非常漂亮。但是，如何使用流动布局使其更具可用性？Harvey Kane 给了我们必须使用的脚本。

# include the class file
require_once('magazinelayout.class.php');

# Define the width for the output area (pixels)
$width = 600;

# Define padding around each image; this *must* be included
#in your style sheet (pixels)
$padding = 3;

# Define your template for outputting images
# (Don't forget to escape the &)
$template = '<img src="image.php?size=[size]&file=[image]" alt="" />';

# create a new instance of the class
$mag = new magazinelayout($width,$padding,$template);

# Add the images in any order
$mag->addImage( 'landscape1.jpg' );
$mag->addImage( 'portrait1.jpg' );
$mag->addImage( 'landscape2.jpg' );

# display the output

echo $mag->getHtml();

我们可以事先定义我们所希望的图像杂志的宽度。因此，如果我们找到浏览器的宽度，我们就可以决定我们布局图像的宽度，这很容易。因为我们已经学会了第二种技巧：自适应内容的流动布局。在他的脚本中，Kevin Hale使用了一个称之为getBrowserWidth() 的方法，你可以在他的文章中更深入的了解该方法的代码。

如果我们用这种方法取代浏览器的宽度值，然后用这个值去寻找我们内容区域的像素宽度（不论图像放在那个区域）。比方说，我们希望将图像放到70%的内容区域中，利用简单的数学知识，我们只需要找到浏览器宽度值的70%就行。

Pixel width = 内容区域百分比 x 　浏览器宽度
$width = 0.70 x getBrowserWidth();

这是很基本的数学知识，是流动布局中处理图像最基本的方法，调整PHP脚本自动寻找图像的像素值。这样，在一个流动布局中，你就能很好的处理图像或其余已经设置宽度的内容。

出处：蓝色理想
责任编辑：bluehearts

上一页 自适应css布局——流动布局新时代 [4] 下一页 自适应css布局——流动布局新时代 [6]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。