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

看板Web_Design作者dreamerslab (dreamerslab)時間15年前 (2011/02/18 18:11)推噓2(2推 0噓 7→)

留言9則, 4人參與討論串3/3 (看更多)

※ 引述《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

02/18 18:18, , 1^F

02/18 18:18, 1^F

→

ss163500

02/18 18:18, , 2^F

02/18 18:18, 2^F

→

opoepev

02/18 18:20, , 3^F

02/18 18:20, 3^F