使用 Image Picker + Masonry + imagesLoaded 來顯示圖片清單,只要寫一點點 JavaScript 程式碼,就能達到不錯的效果。
JavaScript 函式庫
欲完成本文的實作範例,需要以下 JavaScript 函式庫通力合作:
下圖是使用 Image Picker 搭配 Masonry(這拼字好難記啊!)排版後的結果。
實作範例
Image Picker 能夠將一個 HTML 下拉清單(select 元素)裡面的項目改用圖片來顯示(其實是將產生另一個圖片清單區塊)。用法如下:
我在 jsFiddle 上面放了一個可直接測試的範例,所以這裡就不貼程式碼了。點此連結可開啟線上範例程式:Image Picker Example
進入之後點上方的 Run 連結,即可看到執行結果,如下圖:
調整 CSS
預設情況下,Image Picker 會顯示原圖的正常比例,如下圖:
可是當圖片大小不一時,可能會顯得太過凌亂,需要調整。關鍵在於知道 Image Picker 用來控制每一張圖片的 CSS 樣式名稱是 "image_picker_image"。
以下 CSS 範例可指定每張圖片的最大寬度和最小寬度。
套用此樣式之後,實際的效果請看本文的第一張圖片,就能看出差異。
解決圖片重疊問題
原本我沒有使用 imagesLoaded,可是卻發現開啟圖片選取對話窗的時候,有些圖片會重疊,如下圖所示:
這是因為我有用 CSS 改變圖片大小的緣故,而 Masonry 是在這之前就已經計算並設定好圖片的排列位置。Masonry 官網的 FAQ 也有提到這個問題,而解決方法就是利用 imagesLoaded 產生的事件,以便在所有圖片載入完成後,才執行 Mansory 的排版工作。參考以下範例:
同場加映:IE 11 的偵錯功能
順便提及,IE 11 的偵錯工具比先前的版本又更好用了。
底下是兩張螢幕截圖,更詳細的介紹,可參考相關文章或 Channel 9 的影片。
JavaScript 函式庫
- jQuery 2.0.*
- jQuery UI 1.10.*
- Image Picker - 把 HTMl select 元素變成圖片清單
- Masonry - 以「瀑布流」的方式自動排列網頁的區塊元素(Pinterest 就是一個典型的瀑布流版型的例子)
- imagesLoaded (可解決圖片重疊顯示的問題,後述)
下圖是使用 Image Picker 搭配 Masonry(這拼字好難記啊!)排版後的結果。
實作範例
Image Picker 能夠將一個 HTML 下拉清單(select 元素)裡面的項目改用圖片來顯示(其實是將產生另一個圖片清單區塊)。用法如下:
- 在 HTML 裡面加入一個
- 為
- 在網頁載入時為上述
我在 jsFiddle 上面放了一個可直接測試的範例,所以這裡就不貼程式碼了。點此連結可開啟線上範例程式:Image Picker Example
進入之後點上方的 Run 連結,即可看到執行結果,如下圖:
調整 CSS
預設情況下,Image Picker 會顯示原圖的正常比例,如下圖:
可是當圖片大小不一時,可能會顯得太過凌亂,需要調整。關鍵在於知道 Image Picker 用來控制每一張圖片的 CSS 樣式名稱是 "image_picker_image"。
以下 CSS 範例可指定每張圖片的最大寬度和最小寬度。
.image_picker_image { max-width: 140px; max-height: 100px; background-color: #FF0000; }
套用此樣式之後,實際的效果請看本文的第一張圖片,就能看出差異。
解決圖片重疊問題
原本我沒有使用 imagesLoaded,可是卻發現開啟圖片選取對話窗的時候,有些圖片會重疊,如下圖所示:
這是因為我有用 CSS 改變圖片大小的緣故,而 Masonry 是在這之前就已經計算並設定好圖片的排列位置。Masonry 官網的 FAQ 也有提到這個問題,而解決方法就是利用 imagesLoaded 產生的事件,以便在所有圖片載入完成後,才執行 Mansory 的排版工作。參考以下範例:
var $container = $('.image_picker_selector'); // initialize $container.imagesLoaded(function () { $container.masonry({ columnWidth: 30, itemSelector: '.thumbnail' }); });
同場加映:IE 11 的偵錯功能
順便提及,IE 11 的偵錯工具比先前的版本又更好用了。
底下是兩張螢幕截圖,更詳細的介紹,可參考相關文章或 Channel 9 的影片。
![]() |
選取 HTML 元素 |
![]() |
單步除錯 JavaScript |
沒有留言: