搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 Discuz 使用教程 Discuz 圖片列表(瀑布流)模式美化 (圖片間距) ...
byadmin 發表於 2015-3-26 11:52:42 , 5168人已閱讀 , 0人回應
有時候逛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讚數都都是獨立計算 , 這樣的展示效果相信對於行銷來講會更具有意義.  

discuz瀑布流內建樣式美化.jpg


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



Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.135687 second(s), 48 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-12-5 00:45

回頂部