讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

這篇是「jQuery 相簿畫廊外掛 nanogallery2」系列文的第三篇，前兩篇分別介紹了：

• Grid 網格式排版
• Mosaic 拼貼式排版

接下來介紹剩餘的兩種版面效果，但是標題 "自適應版型" 中文的字面跟英文原用語 "justified" 比較難做連結，主要是網路上找不到相關的用詞，比較正確的描述是 "左右對齊" 版型。

以文字來說 "左右對齊" 很好理解，但圖片 "左右對齊" 究竟是什麼狀況我想很難想像得出來，或許 "自適應" 還比較能理解，不過沒關係後面會圖解說明。

一、版型效果

1. Justified 對齊式(自適應)



如上圖，雖然每張圖片大小比例不一、參差不齊，但很神奇的是，每一行的左右邊界圖片都能剛好切齊，因此整個版面看起來並不突兀，如同文字排版 justified 的左右對齊一般。

那麼作為畫廊(gallery)展示效果，Justified 對齊式是不錯的選擇，不必把每張圖片的尺寸比例調整一致，又能維持版面美觀。


2. Cascading 瀑布式



這個畫廊展示效果跟網頁版型中所謂的「瀑布流」很像，一方面圖片還沒全部顯示完之前，會以「無限捲動」的方式載入圖片，就像滑 FB 一樣，只要後面還有資訊就會不斷地載入。

一方面圖片往下產生的效果也很像瀑布流，左右根據圖片不同的比例，各自冒出來、下落的距離也不同。

如上圖，最終圖片完全載入後，底部是長短不一的，可能沒有那麼整齊畫一，但也是有人喜愛這種不落俗套的美感。


3. 其他相關外掛

我個人比較喜歡「nanogallery2」這個外掛，因為含括了所有常見排版方式。如果只需要特定版型的畫廊外掛，也是可考慮使用特定的外掛，以下推薦的兩個都滿不錯的：

• 對齊式：「Justified Gallery」
• 瀑布式：「Masonry」

二、Justifed 對齊式版型

官網提供了範例效果及程式碼，操作流程如下：

• 進入網頁「nanogallery2 demonstrations」
• 1. Select a demo family → 選擇「Gallery layouts」
• 2. Select demonstration → 按下「Justified gallery」

提供範例程式碼如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery1"></div>
<script>
$("#nanogallery1").nanogallery2({
thumbnailHeight: 200,
thumbnailWidth: "auto",
galleryLastRowFull: true,
items: [{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>


以上程式碼展示效果如下：

三、Cascading 瀑布式版型

官網提供了範例效果及程式碼，操作流程如下：

• 進入網頁「nanogallery2 demonstrations」
• 1. Select a demo family → 選擇「Gallery layouts」
• 2. Select demonstration → 按下「Cascading gallery」

提供範例程式碼如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery2"></div>
<script>
$("#nanogallery2").nanogallery2({
"thumbnailLabel": {
"position": "onBottom"
},
"thumbnailHeight": "auto",
"thumbnailWidth": 200,
items: [{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>


以上程式碼展示效果如下：

更多圖片展示工具：