系列文章

• 基于.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>

搞定~

最后

今天剛好是六一兒童節，路上看到很多小朋友都出來玩了，很棒，祝各位大朋友小朋友天天開心~