angular - 尝试显示不同高度的 youtube 搜索结果时出现问题

Question

我正忙于使用 angular4.x 开发一个基本的 youtube 播放器应用程序。我正在使用一个使用 rxjs 的即时搜索组件，当输入字段在 400 毫秒未更改后发生更改时发出请求...

我最初尝试在 col-md-4 div 中显示搜索结果，以便每行显示三个结果。然后我遇到了一个问题，一些搜索结果的一些缩略图或文本有不同的高度，然后会换行到下一行......

然后我将 flexbox 样式应用于搜索结果，这似乎更好，但是一些缩略图总是丢失，我现在每行只有两个搜索结果，其中肯定有 3-4 个空间。

知道我该如何让它工作/为什么有些视频缩略图不显示(即使它们是由 youtube API 返回的)？

我的搜索结果模板:

<div class="eqrow">
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
</div>

我的 eqrow 风格:

.eqrow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.eqrow > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

我的搜索组件:

import {  Component, OnInit, Output, EventEmitter, ElementRef } from '@angular/core';    
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/distinctUntilChanged';

import { RestService } from '../../services/rest.service';
import { SearchResult } from '../../models/search-result.model';

@Component({
  selector: 'app-search-box',
  template: `
    <input type="text" class="form-control" placeholder="Search" [formControl]="term">
  `
})
export class SearchBoxComponent implements OnInit {
  term = new FormControl(); 
  @Output() loading: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output() results: EventEmitter<SearchResult[]> = new EventEmitter<SearchResult[]>();

  constructor(private restService: RestService) { }

  ngOnInit(): void {
        this.term.valueChanges.debounceTime(400)
        .distinctUntilChanged()
        .do(() => this.loading.emit(true))         // enable loading
        .switchMap(term => this.restService.search(term))
        .subscribe(
        (results: SearchResult[]) => {
            this.loading.emit(false);
            this.results.emit(results);
        },
        (err) => { 
          console.log(err);
          this.loading.emit(false);
        },
        () => { 
          this.loading.emit(false);
        });
  }
}

Answer 1

我用 my-col 替换了 col-md-4 类，这是一个可能会干扰 Flexbox 属性的 Bootstrap 类。

连同添加的 justify-content: space-between (to eqrow) 和 flex-basis: 30% in my-col，我们在元素之间创建一个装订线，默认情况下它们每行具有相同的高度，因为 align-items/ àalign-content 默认为 stretch。

然后还通过制作 flex 元素 my-col flex 容器(嵌套的 Flexbox)，可以使用 Flexbox 属性进一步控制其子项，这又可以是 flex 元素和 flex 容器。

Fiddle demo

.eqrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.eqrow .my-col {
  flex-basis: 30%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  border: 1px dotted gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="eqrow">
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
</div>