Blazor Components Masonry

В Blazor существует несколько бесплатных библиотек компонентов, которые позволяют создать сетку фотографий, подобную Pinterest, без использования библиотеки Masonry

Вот список некоторых из них :

1. MudBlazor - основанна на принципах Material Design и предоставляет компоненты для создания различных сеток
2. Blazorise - поддерживает несколько CSS-фреймворков, включая Bootstrap, Material и Bulma и имеет утилиты для создания сеток и нужных вам макетов
3. Bit BlazorUI - предлагает разнообразные компоненты для создания сеток
4. Blazored - предоставляет инструменты для создания различных макетов, включая фотогалереи
5. Ant Design Blazor - также включает в себя возможности для создания сеток
6. MatBlazor - поддерживает Material Design и предоставляет компоненты для создания сеток и макетов

MudBlazor пользуется наибольшей популярностью среди разработчиков Blazor. Вот пример, как можно создать сетку фотографий с помощью MudBlazor:

@page "/myPrintestImage"

<MudGrid>
    @foreach (var photo in photos)
    {
        <MudItem xs="12" sm="6" md="4" lg="3">
            <MudCard>
                <MudCardMedia Image="@(photo.Url)" />
                <MudCardContent>
                    <MudText Typo="Typo.h6">@photo.Title</MudText>
                    </MudCardContent>
                </MudCard>
            </MudItem>
    }
</MudGrid>

@code {
    private List<Photo> photos = new List<Photo>
    {
        new Photo { Url = "images/1.jpg", Title = "Photo 1" },
        new Photo { Url = "images/2.jpg", Title = "Photo 2" },
        new Photo { Url = "images/3.jpg", Title = "Photo 3" },
        new Photo { Url = "images/4.jpg", Title = "Photo 4" },
        new Photo { Url = "images/5.jpg", Title = "Photo 5" },
        new Photo { Url = "images/6.jpg", Title = "Photo 6" },
        new Photo { Url = "images/7.jpg", Title = "Photo 7" },
        new Photo { Url = "images/8.jpg", Title = "Photo 8" },

        // Добавьте больше фото
    };

    private class Photo
    {
        public string Url { get; set; }
        public string Title { get; set; }
    }
}

Для установки и настройки MudBlazor выполните следующие шаги:

1. dotnet add package MudBlazor
2. Import => @using MudBlazor / @using MudBlazor.Services
3. MainLayout => <MudThemeProvider />
4. App =>   <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
  <script src="_content/MudBlazor/MudBlazor.min.js"></script>
5. Program => builder.Services.AddMudServices();

если совсем не хочется нугеты добавлять, то можно с помощью bootstrap

@page "/myPinterestImage"

<div class="container">
    <div class="row">
        @foreach (var photo in photos)
        {
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 mb-4">
                <div class="card">
                    <img src="@photo.Url" class="card-img-top fixed-size" alt="@photo.Title">
                    <div class="card-body">
                        <h5 class="card-title">@photo.Title</h5>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

<style>
    .fixed-size {
        width: 100%;
        height: 200px; /* Задайте желаемую высоту */
        object-fit: cover; /* Обрезка изображения по размеру контейнера */
    }
</style>

@code {
    private List<Photo> photos = new List<Photo>
    {
        new Photo { Url = "images/1.jpg", Title = "Photo 1" },
        new Photo { Url = "images/2.jpg", Title = "Photo 2" },
        new Photo { Url = "images/3.jpg", Title = "Photo 3" },
        new Photo { Url = "images/4.jpg", Title = "Photo 4" },
        new Photo { Url = "images/5.jpg", Title = "Photo 5" },
        new Photo { Url = "images/6.jpg", Title = "Photo 6" },
        new Photo { Url = "images/7.jpg", Title = "Photo 7" },
        new Photo { Url = "images/8.jpg", Title = "Photo 8" },

        // Добавьте больше фото
    };

    private class Photo
    {
        public string Url { get; set; }
        public string Title { get; set; }
    }
}

по умолчанию он в App вписан

а вот еще вариант с помощью css flex-ов

@page "/myPinterestImage"

<style>
    .photo-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .photo-item {
        flex: 1 1 calc(25% - 16px);
        box-sizing: border-box;
    }

        .photo-item img {
            width: 100%;
            height: 200px; /* Задайте желаемую высоту */
            object-fit: cover; /* Обрезка изображения по размеру контейнера */
            display: block;
        }

        .photo-item h5 {
            text-align: center;
            margin: 8px 0 0;
        }
</style>

<div class="photo-grid">
    @foreach (var photo in photos)
    {
        <div class="photo-item">
            <img src="@photo.Url" alt="@photo.Title">
            <h5>@photo.Title</h5>
        </div>
    }
</div>

@code {
    private List<Photo> photos = new List<Photo>
    {
        new Photo { Url = "images/1.jpg", Title = "Photo 1" },
        new Photo { Url = "images/2.jpg", Title = "Photo 2" },
        new Photo { Url = "images/3.jpg", Title = "Photo 3" },
        new Photo { Url = "images/4.jpg", Title = "Photo 4" },
        new Photo { Url = "images/5.jpg", Title = "Photo 5" },
        new Photo { Url = "images/6.jpg", Title = "Photo 6" },
        new Photo { Url = "images/7.jpg", Title = "Photo 7" },
        new Photo { Url = "images/8.jpg", Title = "Photo 8" },

        // Добавьте больше фото
    };

    private class Photo
    {
        public string Url { get; set; }
        public string Title { get; set; }
    }
}