<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • 基于.NetCore開發博客項目 StarBlog - (10) 圖片瀑布流

    系列文章

    前言

    上一篇介紹了圖片批量導入操作,我看到有同學留言問怎么沒有上傳圖片的介紹,這里再解釋一下,本系列文章介紹的順序是:

    • 博客的網站前臺管理后臺
    • 從 后端C#代碼 到 前端Vue+ElementUI

    所以上傳圖片這部分會在后續的管理后臺開發中介紹,歡迎繼續關注哈~

    接著上篇文章,繼續介紹攝影模塊,圖片導入之后,需要做展示,本文介紹(水)圖片瀑布流的實現。

    PS:涉及到的技術很簡單,所以本文會比較水一點,請大佬們跳過吧~

    先看效果

    導入一些爬蟲采集的壁紙作為測試數據,先看看瀑布流效果

    image

    管理后臺的瀑布流

    image

    這是首頁卡片效果

    image

    實現

    瀑布流原理很簡單,有一堆現成的輪子可以用,那就不造輪子了(直接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>
    

    搞定~

    最后

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

    posted @ 2022-06-01 17:52  程序設計實驗室  閱讀(512)  評論(4編輯  收藏  舉報
    国产美女a做受大片观看