2019年10月5日

讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍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://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/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://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>


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




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

沒有留言:

張貼留言注意事項:

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

TOP