Re: [閒聊] 用GOOGLE搜尋想到的問題-圖片排列

[dreamerslab (dreamerslab)]

※ 引述《UniFish (貢貢老盃)》之銘言：
: LINK：http://goo.gl/cI6rl
: 我搜尋圖片時發現....每張大小不同的圖片排在一起~
: 依固定高度作縮圖，hmm..OK~我記得某個介紹Jquery的網站有提到...
: 但..Google居然可以每一列的寬度都一樣...囧
: 是圖片故意挑過嗎!?每張圖的間距也一樣...
: 這個是用什麼方法作的呢?

看了一下 firebug, google 是在 server端算好每一張 img wrapper
的寬跟高沒錯, 他會先從使用者端抓window width & height 再丟到
server 去算. 用 js 去計算其實也慢不到哪裡去, 現在的瀏覽器效能
都很強. 算法是先用 window width 去求出每一列有幾張. 然後找出
那一列裡面 height 最小的照片當做整列的 height. 再算 window
總寬比一列的總寬多了多少. 然後平均分配給每一張照片的 wrapper
這樣就行了. 聽起來有沒有覺得其實也不是太難 :)

有一些css的重點是, wrapper 要設成 display: inline-block;
overflow: hidden; img 要設 width: 100%

我做了一個小demo, http://bit.ly/i3mWBN 有興趣的人可以看一下
source code. js, css 都直接寫在裡面了 :)
demo裡有一點點的小差距, 是四捨五入的問題, 懶得處理了. 不過
基本上已經很整齊

另外這是在 mac 上寫的, ie 完全沒測過, 所以如果爆炸了請多多
包含. js前面一推都是用google image search api去抓資料. 有關
版面的其實就 build, beautify 兩個而已.

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 123.192.49.219
推 ss163500:ie8看ok pcman看就爆炸 奇怪 照理講pcman不是也用ie的核
→ ss163500:為什麼常常看網頁就變成兩個世界???
→ opoepev:pcman最多好像是用到ie7的核心而已…
→ ss163500:咦 真的...我用ie8相容性檢視就得到跟pcman一樣的效果了
→ dreamerslab:ie可能要改用flaot:left;display:in-line;不過反正
→ dreamerslab:demo而已,懶得處理
推 bassann:cool! 謝謝!
→ dreamerslab:還是把ie6.7bug修好了,有點醜就是了,每一張都要給寬度
→ dreamerslab:不能用css100%,會把wrapper撐到和window一樣寬...