css實現非等寬圖片列表的布局詳解

各大seo/seo.html" target="_blank">搜尋引擎的圖片頻道的搜尋結果頁，搜尋出來的結果都是較零碎的圖片，圖片品質、尺寸都是參差不齊的，並限定了每一行的總寬度。這種非等寬的圖片列表，在Google+、flickr也都有用到。

最近剛好對360搜尋的圖片搜尋結果頁進行了一次重構和改版，對於這種圖片布局也花心思研究了一番，接下來說說我的一些處理思路。

非等寬的單個圖片要排列到一個固定了寬度的容器中，那麼這個等寬的容器就是最大的限制和障礙，開始懷念那種常見等寬瀑布流的布局(沒有限制真好)。

先理下基本的需求：

• 1、圖片的寬度是不固定的；
• 2、圖片的高度是固定的；
• 3、每行圖片的總寬度是固定的，所以每行能容納的圖片的數量是無法確定的；
• 4、確保圖片品質不變，不能有展開變形導致圖片失真的情況出現；
• 5、圖片之間的間距是固定的；

任意選取一組圖片資料，計算圖片寬度的總和，當寬度剛好大於或者等於一行的固定寬度，那麼這就是一組待處理尺寸的原圖，處理前的情況應該是這樣的。

以一行圖片為單位，用一個 ul 列表來存放這一行圖片，將 li 浮動。一組原圖的寬度的總和通常都是大於一行的寬度，剛好相等的情況很少見，如果寬度過大，使用浮動的布局必然會讓最後一張圖掉下去。基本的 HTML 結構是下面這樣的。

代碼如下

複製代碼

<STYLE type=text/css> .img_list{ /*該行的固定寬度*/ overflow:hidden } .img_list li{ float:left; } </STYLE> <UL class=img_list>   <LI><A href="#"><IMG alt="" src="demo.jpg"></A></LI>   <LI><A href="#"><IMG alt="" src="demo.jpg"></A></LI>   <LI><A href="#"><IMG alt="" src="demo.jpg"></A></LI>   <LI><A href="#"><IMG alt="" src="demo.jpg"></A></LI>   <LI><A href="#"><IMG alt="" src="demo.jpg"></A></LI> </UL>

為了盡量簡化方法，這裡先無視間距。

裁切寬度

那麼每一組圖片只要將多出來那部分的寬度(extraWidth)想辦法解決掉就行了。為了保證圖片不失真，可以使用裁切的方式，li 設定一個固定的寬度，並且設定 overflow:hidden，圖片本身還是設定原圖的尺寸，同時給圖片設定負 marginLeft，確保圖片是置中的。將多出來的那部分寬度通過對每張圖片進行相同寬度的裁切，這樣可以確保每張圖片裁切得比較均勻。

裁切的簡單公式： 圖片裁切的寬度(marginLeft) = 多出的寬度(extraWidth) / 圖片的數量(imgLength) / 2

下面是對單個圖片的裁切。

代碼如下	複製代碼
<LI style="WIDTH: 100px; HEIGHT: 100px; OVERFLOW: hidden">   <A href="#">     <IMG style="WIDTH: 104px; HEIGHT: 100px; MARGIN-LEFT: -2px" alt="" src="demo.jpg">   </A> </LI>

裁切圖片雖然能確保圖片不失真，並保證每一行圖片的行高是一樣的，但會損失掉圖片一部分左右邊緣的內容，裁切掉的寬度的大小依據一行圖片的數量多少來變化的，對於一行圖片數較多的情況下(豎圖較多)，這種方法還是不錯的。

除了裁切還有其他的辦法嗎？

等比縮放

裁切是為了減小圖片所佔的寬度，並確保圖片不失真，縮放同樣也可以實現前面說到的兩點，縮放的處理要比裁切會麻煩些。

將前面計算出的extraWidth，通過對圖片進行等比例縮放的方式，將縮放的寬度平均分配到每張圖片上，這是對圖片寬度的處理。

縮放寬度的簡單公式：圖片縮放後的寬度(zoomWidth) = 圖片原始寬度(imgWidth) – 多出的寬度(extraWidth) / 圖片的數量(imgLength)

既然是等比例縮放，對圖片的寬度進行了縮放後，圖片的高度也要按照相等的比例進行縮放。可以用第一張圖片的高度作為基準高度。

基準高度的簡單公式：基準高度(baseHeight) = 圖片原始高度(imgHeight) – 多出的寬度(extraWidth) / 圖片的數量(imgLength)

根據圖片原始的寬度和縮放後的寬度的計算得出的縮放比例，就可以計算出每張圖片應該等比例縮放的高度。這個縮放的高度和之前得到的基準高度會有一定的出入，如果縮放後的高度大於基準高度可以通過負 marginTop 的方法對圖片的高度進行裁切，如果縮放後的高度小於基準的高度，可以再對圖片進行等比例放大，然後再對寬度進行一定的裁切。通過這些處理，就可以保證每一行是等高的。

等比縮放對圖片的裁切會很小，基本不會損失掉原圖邊緣的內容，但是會讓每一行的行高都不一樣，無法固定行高。Google+ 和 flickr 就是採用的等比縮放的方法，這種方法對於大尺寸以及橫圖居多的情況很合適。

不管是裁切還是縮放，一行圖片在計算後都會有一定的誤差值，需要對誤差值進一步再做處理，這個不難，就不多說了。

如果你也有好的處理辦法，歡迎與我討論。