以我的螢幕來看的時候一列的寬是1403
第一列的每個li寬度分別是
205 167 166 170 167 90 183 159
合計1307
margin-left是12
1307 + 12*8 = 1403
第二列
176 142 116 176 176 99 99 174 137
合計1295
margin-left是12
1295 + 12*9 = 1403
結果長度完全符合
但是
再仔細去檢查li裡面的圖片
卻發現圖片的長寬並不符合li的大小
例如第一列 (列的高度是125)
li 尺寸 205*125 167*125 166*125 170*125 167*125 90*125 183*125 159*125
img 尺寸 205*154 167*125 166*125 170*128 185*125 90*128 138*140 149*125
可見整列的寬度是固定的,但是經由計算而特意調整出來
推測是將每列的差平均分配給每個li去消化
依照圖片大小做比例的變化
最後總數就會一樣
※ 引述《UniFish (貢貢老盃)》之銘言:
: LINK:http://goo.gl/cI6rl
: 我搜尋圖片時發現....每張大小不同的圖片排在一起~
: 依固定高度作縮圖,hmm..OK~我記得某個介紹Jquery的網站有提到...
: 但..Google居然可以每一列的寬度都一樣...囧
: 是圖片故意挑過嗎!?每張圖的間距也一樣...
: 這個是用什麼方法作的呢?
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 211.75.166.220