使用 Image Picker 和 Masonry 來顯示圖片清單

使用 Image Picker + Masonry + imagesLoaded 來顯示圖片清單，只要寫一點點 JavaScript  程式碼，就能達到不錯的效果。

JavaScript 函式庫

欲完成本文的實作範例，需要以下 JavaScript 函式庫通力合作：

• jQuery 2.0.*
• jQuery UI 1.10.*
• Image Picker - 把 HTMl select 元素變成圖片清單
• Masonry - 以「瀑布流」的方式自動排列網頁的區塊元素（Pinterest 就是一個典型的瀑布流版型的例子）
• imagesLoaded （可解決圖片重疊顯示的問題，後述）

效果

下圖是使用 Image Picker 搭配 Masonry（這拼字好難記啊！）排版後的結果。

實作範例

Image Picker 能夠將一個 HTML 下拉清單（select 元素）裡面的項目改用圖片來顯示（其實是將產生另一個圖片清單區塊）。用法如下：

1. 在 HTML 裡面加入一個 元素，指定套用 CSS 類別 "image-picker"。
2. 為 元素中的每個清單項目元素（即 ）加上自訂屬性 data-img-src，以指定該項目所連結的圖片來源網址。
3. 在網頁載入時為上述 元素套用 Image Picker 效果。

我在 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