系列文章
- 基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?
- 基于.NetCore開發部落格項目 StarBlog - (2) 環境準備和建立項目
- 基于.NetCore開發部落格項目 StarBlog - (3) 模型設計
- 基于.NetCore開發部落格項目 StarBlog - (4) markdown部落格批量導入
- 基于.NetCore開發部落格項目 StarBlog - (5) 開始搭建Web項目
- 基于.NetCore開發部落格項目 StarBlog - (6) 頁面開發之部落格文章清單
- 基于.NetCore開發部落格項目 StarBlog - (7) 頁面開發之文章詳情頁面
- 基于.NetCore開發部落格項目 StarBlog - (8) 分類層級結構展示
- 基于.NetCore開發部落格項目 StarBlog - (9) 圖檔批量導入
- 基于.NetCore開發部落格項目 StarBlog - (10) 圖檔瀑布流
- 基于.NetCore開發部落格項目 StarBlog - (11) 實作通路統計
- 基于.NetCore開發部落格項目 StarBlog - (12) Razor頁面動态編譯
- 基于.NetCore開發部落格項目 StarBlog - (13) 加入友情連結功能
- 基于.NetCore開發部落格項目 StarBlog - (14) 實作主題切換功能
- 基于.NetCore開發部落格項目 StarBlog - (15) 生成随機尺寸圖檔
- 基于.NetCore開發部落格項目 StarBlog - (16) 一些新功能 (監控/統計/配置/初始化)
- 基于.NetCore開發部落格項目 StarBlog - (17) 自動下載下傳文章裡的外部圖檔
- ...
前言
上一篇介紹了圖檔批量導入操作,我看到有同學留言問怎麼沒有上傳圖檔的介紹,這裡再解釋一下,本系列文章介紹的順序是:
- 從 部落格的網站前台 到 管理背景
- 從 後端C#代碼 到 前端Vue+ElementUI
是以上傳圖檔這部分會在後續的管理背景開發中介紹,歡迎繼續關注哈~
接着上篇文章,繼續介紹攝影子產品,圖檔導入之後,需要做展示,本文介紹(水)圖檔瀑布流的實作。
PS:涉及到的技術很簡單,是以本文會比較水一點,請大佬們跳過吧~
先看效果
導入一些爬蟲采集的桌面作為測試資料,先看看瀑布流效果
管理背景的瀑布流
這是首頁卡片效果
實作
瀑布流原理很簡單,有一堆現成的輪子可以用,那就不造輪子了(直接CV操作)哈哈哈
部落格前台的這個瀑布流我選的是
masonry-layout
,項目首頁:https://github.com/desandro/masonry
選這個元件的原因是我看到Bootstrap5的例子代碼裡用了這個實作瀑布流,那我就copy過來了(逃
使用方法很簡單
<div class="row" data-masonry='{"percentPosition": true }'>
@foreach (var photo in Model.Photos) {
<div class="col-sm-6 col-lg-4 mb-4">
<partial name="Widgets/PhotoCard" model="photo"/>
</div>
}
</div>
有很多option可以配置,我沒深入研究
它的github首頁也沒怎麼介紹,文檔都在官網裡:https://masonry.desandro.com/
這個官網的風格也是别具一格(逃
管理背景的瀑布流是用
vue-waterfall
元件實作的,具體在後續的文章裡會介紹~
最後首頁這幾個卡片也是我在Bootstrap5的例子裡參考魔改來的
代碼如下
@model Photo
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg"
style="background-image: url('media/@Model.FilePath.Replace("\\", "/")');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h2 class="pt-5 mt-5 mb-5 display-6 lh-1 fw-bold">
@Model.Title
<p></p>
</h2>
<ul class="d-flex list-unstyled mt-auto">
<li class="me-auto">
<img src="~/images/star.jpg" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li>
<li class="d-flex align-items-center me-3">
<span class="bi me-2">
<i class="fa-solid fa-location-pin"></i>
</span>
<small>@Model.Location</small>
</li>
<li class="d-flex align-items-center">
<span class="bi me-2">
<i class="fa-solid fa-calendar-days"></i>
</span>
<small>@Model.CreateTime.ToShortDateString()</small>
</li>
</ul>
</div>
</div>
搞定~
最後
今天剛好是六一兒童節,路上看到很多小朋友都出來玩了,很棒,祝各位大朋友小朋友天天開心~
微信公衆号:「程式設計實驗室」
專注于網際網路熱門新技術探索與團隊靈活開發實踐,包括架構設計、機器學習與資料分析算法、移動端開發、Linux、Web前後端開發等,歡迎一起探讨技術,分享學習實踐經驗。