2019年10月1日 星期二

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

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

Wayne Fu 0 A+
nanogallery2-justified-cascading-layout.jpg-讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛這篇是「jQuery 相簿畫廊外掛 nanogallery2」系列文的第三篇,前兩篇分別介紹了:


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

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



一、版型效果


1. Justified 對齊式(自適應)

nanogallery2-justified-cascading-layout-1.jpg-讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

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

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


2. Cascading 瀑布式

nanogallery2-justified-cascading-layout-2.jpg-讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

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

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

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


3. 其他相關外掛

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




二、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/AVvXsEiylYQaA_sgdKwcRqh62P_NAsiFnPnSaTy-lMlyBrjkZAxSwQgNlFnxPGH4OVflmgbwfoX_BDo8fPMQFiewG0h3hdw5pqd6JUmBYYJ0oCyz9Nk6R7kSvqZlZriwuIcDr0d1uc2O4SuUS7kI/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylYQaA_sgdKwcRqh62P_NAsiFnPnSaTy-lMlyBrjkZAxSwQgNlFnxPGH4OVflmgbwfoX_BDo8fPMQFiewG0h3hdw5pqd6JUmBYYJ0oCyz9Nk6R7kSvqZlZriwuIcDr0d1uc2O4SuUS7kI/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YOku6vV4oVbax6xh4vIn8d5HmcICpYcDRYxbBH-le6OlxK8d1LYHLYq2e_7tXcoz6GD47TUB5L-hE2L-8nrY0OSMc2OUjdqoqQ5LOZqMijDmuOEkT1UkFaqIs_cF64gxBL0VovcKK_r9/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YOku6vV4oVbax6xh4vIn8d5HmcICpYcDRYxbBH-le6OlxK8d1LYHLYq2e_7tXcoz6GD47TUB5L-hE2L-8nrY0OSMc2OUjdqoqQ5LOZqMijDmuOEkT1UkFaqIs_cF64gxBL0VovcKK_r9/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbYOaxIMs8Chw7vD8jPtP40W5Z1Bj2jVVTjbzIuMorvSkQMErKmKONsVnjn7NCIjAAwe5ux-o4_ePWdH-uPFLhYUYcF8e-ByZNG80iroyaiNAfj0MJnDs3LiccSXNIgzaC9YnNNs7MKZ8/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbYOaxIMs8Chw7vD8jPtP40W5Z1Bj2jVVTjbzIuMorvSkQMErKmKONsVnjn7NCIjAAwe5ux-o4_ePWdH-uPFLhYUYcF8e-ByZNG80iroyaiNAfj0MJnDs3LiccSXNIgzaC9YnNNs7MKZ8/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgn_dKi3lmxGl3qwvBZjFj226TVWGWAs4QZOQgxvnWqeZfIlnjut42GSAnMjqAoqf4yHkavLXxK14L4bdKyGbrYf_V82n1_y2ztiV9vP3OiWwBQA2mRQT-IHtWjsrEXCxBIeQDZsVdsc5Y/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgn_dKi3lmxGl3qwvBZjFj226TVWGWAs4QZOQgxvnWqeZfIlnjut42GSAnMjqAoqf4yHkavLXxK14L4bdKyGbrYf_V82n1_y2ztiV9vP3OiWwBQA2mRQT-IHtWjsrEXCxBIeQDZsVdsc5Y/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYdial42CbZLBJABJl6sgBP-A1k4HtsOEuumAte98Xn32iKZ7SO1hjgDjxUGNMU_ZLE_vJVcOYMC1ef-S1LRq1Z-5leDe_m5gKpWWSWJXn-BsrdRY2_BZec4Z5R5Nd_8vCHzGEmA5bPog/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYdial42CbZLBJABJl6sgBP-A1k4HtsOEuumAte98Xn32iKZ7SO1hjgDjxUGNMU_ZLE_vJVcOYMC1ef-S1LRq1Z-5leDe_m5gKpWWSWJXn-BsrdRY2_BZec4Z5R5Nd_8vCHzGEmA5bPog/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZUditGS4SYdVmMbgJyE_lLnvlkvSS37ixdiZ0eor3tE9IZqVqnERdLdRKrCxmYBvNjhifHW8bHCdmtrNShKlyDjNlZxsh2rHOEULQQhMBLqIgUF9EUERe-pXjI5YwYoHgp1Ec8EPa0QG/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZUditGS4SYdVmMbgJyE_lLnvlkvSS37ixdiZ0eor3tE9IZqVqnERdLdRKrCxmYBvNjhifHW8bHCdmtrNShKlyDjNlZxsh2rHOEULQQhMBLqIgUF9EUERe-pXjI5YwYoHgp1Ec8EPa0QG/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNFeenunlpGEA_EhHB0wVc3G7wBJnX4jE833K-Sa6g8CqpcYX2D8l3UXEH0DYdl2lmWCkG5BhQnzV-dXnyroVGRzKJzWb_rd7Aj8-3dE-tay0My1FUXDm4mEARCHOAMUlq2O5OIFVO-Kq/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNFeenunlpGEA_EhHB0wVc3G7wBJnX4jE833K-Sa6g8CqpcYX2D8l3UXEH0DYdl2lmWCkG5BhQnzV-dXnyroVGRzKJzWb_rd7Aj8-3dE-tay0My1FUXDm4mEARCHOAMUlq2O5OIFVO-Kq/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZ5RkAcvMWwvpHOAyYqtViqqoGR8_fajzqtxNhAJnSPCFYnwBQ4qMVuJDe57DnsITEshGPJzgewMpJPuSHHFqU97350SH55iplocWI_k66GIVWisRKG4AL85SOzCWW20pwLIM-qp4gi26/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZ5RkAcvMWwvpHOAyYqtViqqoGR8_fajzqtxNhAJnSPCFYnwBQ4qMVuJDe57DnsITEshGPJzgewMpJPuSHHFqU97350SH55iplocWI_k66GIVWisRKG4AL85SOzCWW20pwLIM-qp4gi26/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylYQaA_sgdKwcRqh62P_NAsiFnPnSaTy-lMlyBrjkZAxSwQgNlFnxPGH4OVflmgbwfoX_BDo8fPMQFiewG0h3hdw5pqd6JUmBYYJ0oCyz9Nk6R7kSvqZlZriwuIcDr0d1uc2O4SuUS7kI/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylYQaA_sgdKwcRqh62P_NAsiFnPnSaTy-lMlyBrjkZAxSwQgNlFnxPGH4OVflmgbwfoX_BDo8fPMQFiewG0h3hdw5pqd6JUmBYYJ0oCyz9Nk6R7kSvqZlZriwuIcDr0d1uc2O4SuUS7kI/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YOku6vV4oVbax6xh4vIn8d5HmcICpYcDRYxbBH-le6OlxK8d1LYHLYq2e_7tXcoz6GD47TUB5L-hE2L-8nrY0OSMc2OUjdqoqQ5LOZqMijDmuOEkT1UkFaqIs_cF64gxBL0VovcKK_r9/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YOku6vV4oVbax6xh4vIn8d5HmcICpYcDRYxbBH-le6OlxK8d1LYHLYq2e_7tXcoz6GD47TUB5L-hE2L-8nrY0OSMc2OUjdqoqQ5LOZqMijDmuOEkT1UkFaqIs_cF64gxBL0VovcKK_r9/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbYOaxIMs8Chw7vD8jPtP40W5Z1Bj2jVVTjbzIuMorvSkQMErKmKONsVnjn7NCIjAAwe5ux-o4_ePWdH-uPFLhYUYcF8e-ByZNG80iroyaiNAfj0MJnDs3LiccSXNIgzaC9YnNNs7MKZ8/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbYOaxIMs8Chw7vD8jPtP40W5Z1Bj2jVVTjbzIuMorvSkQMErKmKONsVnjn7NCIjAAwe5ux-o4_ePWdH-uPFLhYUYcF8e-ByZNG80iroyaiNAfj0MJnDs3LiccSXNIgzaC9YnNNs7MKZ8/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgn_dKi3lmxGl3qwvBZjFj226TVWGWAs4QZOQgxvnWqeZfIlnjut42GSAnMjqAoqf4yHkavLXxK14L4bdKyGbrYf_V82n1_y2ztiV9vP3OiWwBQA2mRQT-IHtWjsrEXCxBIeQDZsVdsc5Y/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgn_dKi3lmxGl3qwvBZjFj226TVWGWAs4QZOQgxvnWqeZfIlnjut42GSAnMjqAoqf4yHkavLXxK14L4bdKyGbrYf_V82n1_y2ztiV9vP3OiWwBQA2mRQT-IHtWjsrEXCxBIeQDZsVdsc5Y/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYdial42CbZLBJABJl6sgBP-A1k4HtsOEuumAte98Xn32iKZ7SO1hjgDjxUGNMU_ZLE_vJVcOYMC1ef-S1LRq1Z-5leDe_m5gKpWWSWJXn-BsrdRY2_BZec4Z5R5Nd_8vCHzGEmA5bPog/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYdial42CbZLBJABJl6sgBP-A1k4HtsOEuumAte98Xn32iKZ7SO1hjgDjxUGNMU_ZLE_vJVcOYMC1ef-S1LRq1Z-5leDe_m5gKpWWSWJXn-BsrdRY2_BZec4Z5R5Nd_8vCHzGEmA5bPog/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZUditGS4SYdVmMbgJyE_lLnvlkvSS37ixdiZ0eor3tE9IZqVqnERdLdRKrCxmYBvNjhifHW8bHCdmtrNShKlyDjNlZxsh2rHOEULQQhMBLqIgUF9EUERe-pXjI5YwYoHgp1Ec8EPa0QG/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZUditGS4SYdVmMbgJyE_lLnvlkvSS37ixdiZ0eor3tE9IZqVqnERdLdRKrCxmYBvNjhifHW8bHCdmtrNShKlyDjNlZxsh2rHOEULQQhMBLqIgUF9EUERe-pXjI5YwYoHgp1Ec8EPa0QG/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNFeenunlpGEA_EhHB0wVc3G7wBJnX4jE833K-Sa6g8CqpcYX2D8l3UXEH0DYdl2lmWCkG5BhQnzV-dXnyroVGRzKJzWb_rd7Aj8-3dE-tay0My1FUXDm4mEARCHOAMUlq2O5OIFVO-Kq/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNFeenunlpGEA_EhHB0wVc3G7wBJnX4jE833K-Sa6g8CqpcYX2D8l3UXEH0DYdl2lmWCkG5BhQnzV-dXnyroVGRzKJzWb_rd7Aj8-3dE-tay0My1FUXDm4mEARCHOAMUlq2O5OIFVO-Kq/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZ5RkAcvMWwvpHOAyYqtViqqoGR8_fajzqtxNhAJnSPCFYnwBQ4qMVuJDe57DnsITEshGPJzgewMpJPuSHHFqU97350SH55iplocWI_k66GIVWisRKG4AL85SOzCWW20pwLIM-qp4gi26/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZ5RkAcvMWwvpHOAyYqtViqqoGR8_fajzqtxNhAJnSPCFYnwBQ4qMVuJDe57DnsITEshGPJzgewMpJPuSHHFqU97350SH55iplocWI_k66GIVWisRKG4AL85SOzCWW20pwLIM-qp4gi26/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/AVvXsEiylYQaA_sgdKwcRqh62P_NAsiFnPnSaTy-lMlyBrjkZAxSwQgNlFnxPGH4OVflmgbwfoX_BDo8fPMQFiewG0h3hdw5pqd6JUmBYYJ0oCyz9Nk6R7kSvqZlZriwuIcDr0d1uc2O4SuUS7kI/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylYQaA_sgdKwcRqh62P_NAsiFnPnSaTy-lMlyBrjkZAxSwQgNlFnxPGH4OVflmgbwfoX_BDo8fPMQFiewG0h3hdw5pqd6JUmBYYJ0oCyz9Nk6R7kSvqZlZriwuIcDr0d1uc2O4SuUS7kI/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YOku6vV4oVbax6xh4vIn8d5HmcICpYcDRYxbBH-le6OlxK8d1LYHLYq2e_7tXcoz6GD47TUB5L-hE2L-8nrY0OSMc2OUjdqoqQ5LOZqMijDmuOEkT1UkFaqIs_cF64gxBL0VovcKK_r9/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YOku6vV4oVbax6xh4vIn8d5HmcICpYcDRYxbBH-le6OlxK8d1LYHLYq2e_7tXcoz6GD47TUB5L-hE2L-8nrY0OSMc2OUjdqoqQ5LOZqMijDmuOEkT1UkFaqIs_cF64gxBL0VovcKK_r9/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbYOaxIMs8Chw7vD8jPtP40W5Z1Bj2jVVTjbzIuMorvSkQMErKmKONsVnjn7NCIjAAwe5ux-o4_ePWdH-uPFLhYUYcF8e-ByZNG80iroyaiNAfj0MJnDs3LiccSXNIgzaC9YnNNs7MKZ8/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbYOaxIMs8Chw7vD8jPtP40W5Z1Bj2jVVTjbzIuMorvSkQMErKmKONsVnjn7NCIjAAwe5ux-o4_ePWdH-uPFLhYUYcF8e-ByZNG80iroyaiNAfj0MJnDs3LiccSXNIgzaC9YnNNs7MKZ8/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgn_dKi3lmxGl3qwvBZjFj226TVWGWAs4QZOQgxvnWqeZfIlnjut42GSAnMjqAoqf4yHkavLXxK14L4bdKyGbrYf_V82n1_y2ztiV9vP3OiWwBQA2mRQT-IHtWjsrEXCxBIeQDZsVdsc5Y/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgn_dKi3lmxGl3qwvBZjFj226TVWGWAs4QZOQgxvnWqeZfIlnjut42GSAnMjqAoqf4yHkavLXxK14L4bdKyGbrYf_V82n1_y2ztiV9vP3OiWwBQA2mRQT-IHtWjsrEXCxBIeQDZsVdsc5Y/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYdial42CbZLBJABJl6sgBP-A1k4HtsOEuumAte98Xn32iKZ7SO1hjgDjxUGNMU_ZLE_vJVcOYMC1ef-S1LRq1Z-5leDe_m5gKpWWSWJXn-BsrdRY2_BZec4Z5R5Nd_8vCHzGEmA5bPog/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYdial42CbZLBJABJl6sgBP-A1k4HtsOEuumAte98Xn32iKZ7SO1hjgDjxUGNMU_ZLE_vJVcOYMC1ef-S1LRq1Z-5leDe_m5gKpWWSWJXn-BsrdRY2_BZec4Z5R5Nd_8vCHzGEmA5bPog/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZUditGS4SYdVmMbgJyE_lLnvlkvSS37ixdiZ0eor3tE9IZqVqnERdLdRKrCxmYBvNjhifHW8bHCdmtrNShKlyDjNlZxsh2rHOEULQQhMBLqIgUF9EUERe-pXjI5YwYoHgp1Ec8EPa0QG/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZUditGS4SYdVmMbgJyE_lLnvlkvSS37ixdiZ0eor3tE9IZqVqnERdLdRKrCxmYBvNjhifHW8bHCdmtrNShKlyDjNlZxsh2rHOEULQQhMBLqIgUF9EUERe-pXjI5YwYoHgp1Ec8EPa0QG/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNFeenunlpGEA_EhHB0wVc3G7wBJnX4jE833K-Sa6g8CqpcYX2D8l3UXEH0DYdl2lmWCkG5BhQnzV-dXnyroVGRzKJzWb_rd7Aj8-3dE-tay0My1FUXDm4mEARCHOAMUlq2O5OIFVO-Kq/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNFeenunlpGEA_EhHB0wVc3G7wBJnX4jE833K-Sa6g8CqpcYX2D8l3UXEH0DYdl2lmWCkG5BhQnzV-dXnyroVGRzKJzWb_rd7Aj8-3dE-tay0My1FUXDm4mEARCHOAMUlq2O5OIFVO-Kq/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZ5RkAcvMWwvpHOAyYqtViqqoGR8_fajzqtxNhAJnSPCFYnwBQ4qMVuJDe57DnsITEshGPJzgewMpJPuSHHFqU97350SH55iplocWI_k66GIVWisRKG4AL85SOzCWW20pwLIM-qp4gi26/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZ5RkAcvMWwvpHOAyYqtViqqoGR8_fajzqtxNhAJnSPCFYnwBQ4qMVuJDe57DnsITEshGPJzgewMpJPuSHHFqU97350SH55iplocWI_k66GIVWisRKG4AL85SOzCWW20pwLIM-qp4gi26/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylYQaA_sgdKwcRqh62P_NAsiFnPnSaTy-lMlyBrjkZAxSwQgNlFnxPGH4OVflmgbwfoX_BDo8fPMQFiewG0h3hdw5pqd6JUmBYYJ0oCyz9Nk6R7kSvqZlZriwuIcDr0d1uc2O4SuUS7kI/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylYQaA_sgdKwcRqh62P_NAsiFnPnSaTy-lMlyBrjkZAxSwQgNlFnxPGH4OVflmgbwfoX_BDo8fPMQFiewG0h3hdw5pqd6JUmBYYJ0oCyz9Nk6R7kSvqZlZriwuIcDr0d1uc2O4SuUS7kI/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YOku6vV4oVbax6xh4vIn8d5HmcICpYcDRYxbBH-le6OlxK8d1LYHLYq2e_7tXcoz6GD47TUB5L-hE2L-8nrY0OSMc2OUjdqoqQ5LOZqMijDmuOEkT1UkFaqIs_cF64gxBL0VovcKK_r9/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YOku6vV4oVbax6xh4vIn8d5HmcICpYcDRYxbBH-le6OlxK8d1LYHLYq2e_7tXcoz6GD47TUB5L-hE2L-8nrY0OSMc2OUjdqoqQ5LOZqMijDmuOEkT1UkFaqIs_cF64gxBL0VovcKK_r9/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbYOaxIMs8Chw7vD8jPtP40W5Z1Bj2jVVTjbzIuMorvSkQMErKmKONsVnjn7NCIjAAwe5ux-o4_ePWdH-uPFLhYUYcF8e-ByZNG80iroyaiNAfj0MJnDs3LiccSXNIgzaC9YnNNs7MKZ8/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbYOaxIMs8Chw7vD8jPtP40W5Z1Bj2jVVTjbzIuMorvSkQMErKmKONsVnjn7NCIjAAwe5ux-o4_ePWdH-uPFLhYUYcF8e-ByZNG80iroyaiNAfj0MJnDs3LiccSXNIgzaC9YnNNs7MKZ8/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgn_dKi3lmxGl3qwvBZjFj226TVWGWAs4QZOQgxvnWqeZfIlnjut42GSAnMjqAoqf4yHkavLXxK14L4bdKyGbrYf_V82n1_y2ztiV9vP3OiWwBQA2mRQT-IHtWjsrEXCxBIeQDZsVdsc5Y/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgn_dKi3lmxGl3qwvBZjFj226TVWGWAs4QZOQgxvnWqeZfIlnjut42GSAnMjqAoqf4yHkavLXxK14L4bdKyGbrYf_V82n1_y2ztiV9vP3OiWwBQA2mRQT-IHtWjsrEXCxBIeQDZsVdsc5Y/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYdial42CbZLBJABJl6sgBP-A1k4HtsOEuumAte98Xn32iKZ7SO1hjgDjxUGNMU_ZLE_vJVcOYMC1ef-S1LRq1Z-5leDe_m5gKpWWSWJXn-BsrdRY2_BZec4Z5R5Nd_8vCHzGEmA5bPog/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYdial42CbZLBJABJl6sgBP-A1k4HtsOEuumAte98Xn32iKZ7SO1hjgDjxUGNMU_ZLE_vJVcOYMC1ef-S1LRq1Z-5leDe_m5gKpWWSWJXn-BsrdRY2_BZec4Z5R5Nd_8vCHzGEmA5bPog/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZUditGS4SYdVmMbgJyE_lLnvlkvSS37ixdiZ0eor3tE9IZqVqnERdLdRKrCxmYBvNjhifHW8bHCdmtrNShKlyDjNlZxsh2rHOEULQQhMBLqIgUF9EUERe-pXjI5YwYoHgp1Ec8EPa0QG/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZUditGS4SYdVmMbgJyE_lLnvlkvSS37ixdiZ0eor3tE9IZqVqnERdLdRKrCxmYBvNjhifHW8bHCdmtrNShKlyDjNlZxsh2rHOEULQQhMBLqIgUF9EUERe-pXjI5YwYoHgp1Ec8EPa0QG/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNFeenunlpGEA_EhHB0wVc3G7wBJnX4jE833K-Sa6g8CqpcYX2D8l3UXEH0DYdl2lmWCkG5BhQnzV-dXnyroVGRzKJzWb_rd7Aj8-3dE-tay0My1FUXDm4mEARCHOAMUlq2O5OIFVO-Kq/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNFeenunlpGEA_EhHB0wVc3G7wBJnX4jE833K-Sa6g8CqpcYX2D8l3UXEH0DYdl2lmWCkG5BhQnzV-dXnyroVGRzKJzWb_rd7Aj8-3dE-tay0My1FUXDm4mEARCHOAMUlq2O5OIFVO-Kq/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZ5RkAcvMWwvpHOAyYqtViqqoGR8_fajzqtxNhAJnSPCFYnwBQ4qMVuJDe57DnsITEshGPJzgewMpJPuSHHFqU97350SH55iplocWI_k66GIVWisRKG4AL85SOzCWW20pwLIM-qp4gi26/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZ5RkAcvMWwvpHOAyYqtViqqoGR8_fajzqtxNhAJnSPCFYnwBQ4qMVuJDe57DnsITEshGPJzgewMpJPuSHHFqU97350SH55iplocWI_k66GIVWisRKG4AL85SOzCWW20pwLIM-qp4gi26/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>


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




更多圖片展示工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP