带有弹性框的动态图库

Question

在下面的图片中，我实现了两套照片，第一组是上传的，第二组是上传的。

实际上，在最后一次上传图片之后，第二组应该开始。

我开始使用可用的照片风格，后来添加了上传图片标记，并且代码变成了意大利面条。

我正在寻找一种方法来制作问题场景。有什么想法吗？

我简化的HTML代码是（除了html评论之外，我在这里放了一些评论**用于解释）

    <div class="gallery-wrapper">
        <ng-container *ngFor="let file of progressFiles; let i = index;">
            <div class="frame">
                <div class="photo-wrapper">
                    <img [src]="sanitizer.bypassSecurityTrustResourceUrl(file.src)" alt="dragged images" width="150" height="150">
                </div>
                <div class="waiting-frame">
                    <div *ngIf="heading === 'VIDEO'" class="loader">Loading...</div>
                    <div *ngIf="heading === 'PHOTO'" class="loader">Loading...</div>
                </div>
            </div>
        </ng-container>
    <!-- this part read medias -->
    <div *ngIf="mediaContent && mediaContent.length">
        <!-- draged and dropped medias -->
        <div dnd-sortable-container [sortableData]="mediaContent">
            <ng-container  *ngFor="let media of mediaContent ; let i = index">
                <div dnd-sortable [sortableIndex]="i" class="frame" (click)="openModal(i, mediaEdit)">
                    <div class="photo-wrapper">
                        <img *ngIf="media.thumbnail" src="{{media.thumbnail}}" alt="dragged images">
                    </div>
                    <div class="modifiers hidden-sm hidden-xs">
                        <div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
                        <div class="sprite sprite-rotate adjust2" tooltip="{{ 'ROTATE' | translate }}" placement="top" tooltipAnimation="true"></div>
                        <div class="sprite sprite-editor adjust" tooltip="{{ 'EDIT' | translate }}" placement="top" tooltipAnimation="true"></div>
                        <div class="sprite sprite-garbage-bin-black" tooltip="{{ 'DELETE' | translate }}" placement="top" tooltipAnimation="true" (click)="deleteMedia($event, i)"></div>
                        <div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true" *ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
                    </div>
                    <div class="modifiers visible-sm-inline-block visible-xs-inline-block">
                        <div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
                        <div class="sprite sprite-rotate adjust2"></div>
                        <div class="sprite sprite-editor adjust"></div>
                        <div class="sprite sprite-garbage-bin-black"
                            (click)="deleteMedia($event, i)"></div>
                        <div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true"
                            *ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
                    </div>
                </div>
            </ng-container>
        </div>
    </div>
    </div>

这是我使用flex-box技术的SASS代码。

.gallery-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
    margin-left: -5px;
    margin-right: -5px;

   .frame {
       margin: 10px;
       border-radius: 6px;
       border: 1px solid $gray;
       max-width: 152px;
       height: 194px;
       overflow: hidden;
       position: relative;
       cursor: move !important;
       display: inline-block;

    .photo-wrapper {
        width: 100%;
        height: 150px;
        overflow: hidden;
        border-bottom: 1px solid $gray;
        display: flex;
        align-items: center;
        background-color: $gray-light;

        img {
            display: inline-block;
            width: 100%;
            height: auto;
            max-height: 150px;
            pointer-events: none;
        }
    }

    .modifiers {
        display: inline-block;
        position: relative;
        padding: 8px 20px;
    }

    .waiting-frame {
        display: inline-block;
        text-align: center;
        position: absolute;
        background-color: $gray-base;
        opacity: 0.6;
        bottom: 0;
        left: 0;
        right: 0;
        width: 150px;
        height: 194px;
        border-radius: 6px;

        .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }

        .loader {
            margin: 50px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 247, 0, 0.2);
            border-right: 1.1em solid rgba(255, 247, 0, 0.2);
            border-bottom: 1.1em solid rgba(255, 247, 0, 0.2);
            border-left: 1.1em solid $brand-primary;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }

        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    }
}

}