Discuz 圖片列表(瀑布流)模式美化 (圖片間距)

有時候逛Discuz 應用中心的時候 , 發現裡面有很多瀑布流相關的應用插件 , 其實DZ X3.0後版本 ( X2.5實現瀑布流修改方法 ) 就已經內建了瀑布流效果(圖片列表模式) , 雖然少了點動態效果以及美觀 , 但卻可以避免瀑布流效果帶來的龐大系統負擔 , 因此後來Shawn幾乎都沒有再安裝過任何瀑布流插件 , 除非是為了做專題頁面 , 前幾天瀏覽一個國外網站 , 發現他的瀑布流排列非常清爽舒服 , 研究了一下他的介面樣式 , 發現圖片大小、間距、背景、陰影有很大的影響要素，因此我做了以下的CSS相關修改：
1. 以寬度960px的版面來說 , 我將圖片寬高設為：219 * 146 (px) , 這邊可以發現我圖片大小是強制一樣大 , 若不強制的話有些長形的圖片常常會讓版面最後排列起來非常凌亂 .

2. 將原先瀑布流每篇文章區塊的內建padding取消 , 只留標題padding , 可有效focus每篇文章區塊中的圖片與標題 .
3. 取消部分多餘的邊框 , 改用一點點陰影 (但是IE9下的版本不支援這個css語法 , 反正IE都被微軟自砍了, 大家乖乖來用Chrome吧 )
4.  第四點和第一點是Shawn覺得最重要的 , 就是圖片列表模式時的間距 , 這部分可以到redef.js 檔案中調整 , 查找

1. var space = typeof(v.space)

複製代碼

找到這一行後將後面的 ? 數字 : v.space; 中的數字部分改為你想要的間距 , 我是改為 16 , 雖然想改到 20 不過以960的版面寬度 , 超過 17 px 就會從原先的每列四個變為每列三個 , 因此最後只能取到 16 px , DZ原先的 10px 真的是太小了
5. 標題字體大小調整、下方顯示項目調整 (作者+瀏覽數+喜歡數) , 因為時間有限 , 所以暫時沒去調整「喜歡數」, 原則上Dicuz中會使用喜歡這個功能的使用者真的是少之又少 , 不如將它改為FB的讚會來的實在一些 , 有空Shawn再來修改這部分吧 , 最終可達到的效果是每篇文章的FB讚數都都是獨立計算 , 這樣的展示效果相信對於行銷來講會更具有意義.  

美化後實際效果：http://yesdesigning.com/forum-43-1.html