Макет мозаики css сделан с помощью giphy api и реагирует - PullRequest
Новая
       30

Макет мозаики css сделан с помощью giphy api и реагирует

0 голосов
/ 04 апреля 2019

Я работаю с giphy api и пытаюсь создать бесшовную мозаику с приложением реагирования.Я продолжаю работать над этим, и мне кажется, что я всегда немного не совершенствуюсь.

enter image description here

Вот изображение того, о чем я говорю.Кажется, что я все выстроил в порядке, но дает дополнительное пространство, потому что это был хороший эффект наведения для giphy.

Вот ссылка на мой текущий файл CSS: 

.giffWrapper {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 3;
  -moz-column-count:    3;
  column-count:         3;
  margin-bottom: 200px;
}

.gifs {
  /* Prevent vertical gaps */
/*  line-height: 0;
  -webkit-column-count: 3;
  -moz-column-count:    3;
  column-count:         3;*/
  height:0;
  padding-bottom:56%;
  position:relative;
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
}

.gifs iframe {
  /* Just in case there are inline attributes */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


@media (max-width: 1200px) {
  .giffWrapper {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}

@media (max-width: 400px) {
  .giffWrapper {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

ИВот мой цикл, который у меня есть в моем файле реакции: 

return (
            <div>
                <div>
                    {this.props.giphs ? (
                        <div className="giffWrapper">
                            {this.props.giphs.map((g,i) => {
                                return (
                                    <div className="gifs">
                                    <iframe src={g.embed_url} frameBorder="0" className="giphy-embed" allowFullScreen></iframe>
                                    </div>
                                )
                            })}
                        </div>
                        ) : null 
                    }
                </div>
            </div>

Я хотел, чтобы все выстроилось в очередь.Кто-нибудь здесь знает о мозаичных раскладках на giphys или картинках случайных размеров, взятых из API?

...