在流動布局中開發(fā)者最關(guān)心的是處理圖像和內(nèi)容，它們需要一定的寬度。大多數(shù)情況下，我們希望我們的圖像盡可能的大，至少在太小時(shí)應(yīng)防止任何令人尷尬的空白，在固定寬度的布局中，可手動調(diào)整，客服這些問題很容易。但是，在流動布局中，圖像區(qū)域的寬度是不斷變化的，這些問題就在此出現(xiàn)了。

　　自動雜志版面設(shè)計(jì)

　　這個(gè)解決方案需要一些聰明的數(shù)學(xué)知識和PHP，在Harvey Kane 的 Automatic Magazine Layout 文章中有全面的解釋(包括數(shù)學(xué))和可下載的源代碼。標(biāo)題由圖像在雜志中如何呈現(xiàn)來決定：有條理且總是完美對齊。當(dāng)然，一本雜志版面的設(shè)計(jì)師都必須經(jīng)過一定的過程來實(shí)現(xiàn)這種效果，包括調(diào)整和手動放置。

　　對我們來說，這一技巧可以實(shí)現(xiàn)我們的效果，下面是腳本實(shí)現(xiàn)這一效果的第一個(gè)例子。

　　正如你所看到的那樣，非常漂亮。但是，如何使用流動布局使其更具可用性?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 = '';

　　# 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();

　　我們可以事先定義我們所希望的圖像雜志的寬度。因此，如果我們找到瀏覽器的寬度，我們就可以決定我們布局圖像的寬度，這很容易。因?yàn)槲覀円呀?jīng)學(xué)會了第二種技巧：自適應(yīng)內(nèi)容的流動布局。在他的腳本中，Kevin Hale使用了一個(gè)稱之為getBrowserWidth() 的方法，你可以在他的文章中更深入的了解該方法的代碼。

　　如果我們用這種方法取代瀏覽器的寬度值，然后用這個(gè)值去尋找我們內(nèi)容區(qū)域的像素寬度(不論圖像放在那個(gè)區(qū)域)。比方說，我們希望將圖像放到70%的內(nèi)容區(qū)域中，利用簡單的數(shù)學(xué)知識，我們只需要找到瀏覽器寬度值的70%就行。

　　Pixel width = 內(nèi)容區(qū)域百分比 x 　瀏覽器寬度

　　$width = 0.70 x getBrowserWidth();

　　這是很基本的數(shù)學(xué)知識，是流動布局中處理圖像最基本的方法，調(diào)整PHP腳本自動尋找圖像的像素值。這樣，在一個(gè)流動布局中，你就能很好的處理圖像或其余已經(jīng)設(shè)置寬度的內(nèi)容。

最新評論