Как использовать интерфейсную функцию Pagination для равномерного распределения неизвестного количества изображений внутри div - PullRequest
Новая
       14

Как использовать интерфейсную функцию Pagination для равномерного распределения неизвестного количества изображений внутри div

0 голосов
/ 30 апреля 2020

Я пытаюсь создать div, который показывает все изображения, которые пользователь сохранил в своем личном кабинете. Количество этих изображений будет неизвестно, оно будет выбрано из базы данных. Основная цель этого div - иметь фиксированную высоту пользовательского экрана области просмотра, чтобы он был заполнен миниатюрными изображениями, пока у всего div не осталось свободного места. Как только это произойдет, затем, если мы нажмем цифру «2» в окне нумерации страниц, то следующий набор миниатюр появится в div, опять же, пока не останется свободного места. И так до тех пор, пока не останется изображений.

Вот живой пример того, что я пытаюсь выполнить sh, который может дать вам наглядное представление о том, что я имею в виду https://letterboxd.com/films/popular/this/week/size/small/ Как вы можете видеть на примере веб-сайта, контейнер, в котором отображаются миниатюры фильмов, имеет фиксированную высоту, а под ним вы можете увидеть кнопку «Далее». Это было бы также пагинацией, о которой я говорю. В моем коде компонент Pagination не имеет «следующий» или «назад», а скорее цифры.

Вот мой код, я бы показал то, что я пробовал до сих пор, но, честно говоря, я не знаю, с чего начать, поэтому любые советы о том, как мне подходить к этой проблеме, были бы ее полезными, поскольку Я использую пакет React- Bootstrap. Я включил собственный компонент Pagination библиотеки, но он не работает. 

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faShareAltSquare } from "@fortawesome/free-solid-svg-icons";
import Container from "react-bootstrap/Container";
import Pagination from "react-bootstrap/Pagination";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Image from "react-bootstrap/Image";
import "./ownStyle.css";

export default class Main extends Component {
  render() {
    // Example of Pagination component from the react-bootstrap docs:
    let active = 2;
    let items = [];
    for (let number = 1; number <= 5; number++) {
      items.push(
        <Pagination.Item key={number} active={number === active}>
          {number}
        </Pagination.Item>
      );
    }

    const paginationBasic = (
      <div>
        <Pagination>{items}</Pagination>
      </div>
    );

    return (
      <Container className="container-md">
        <Row className="header-nav-container">
          {/* Title+Upload button --> */}
          <Col className="upload-container col-8">
            <h3>Seville´s Gallery </h3>
            <Button
              size="lg"
              type="button"
              className="btn btn-primary btn-upload"
            >
              Upload Photos Now
            </Button>
          </Col>
          {/* Title+Upload button --> */}
          <Col className="share-container col-4">
            <h5>Share this gallery</h5>
            <FontAwesomeIcon icon={faShareAltSquare} />
            <a href="www.google.es">
              <h6> Copiar Enlace</h6>
            </a>
          </Col>
        </Row>

        <Container className="showcase-container">
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
        </Container>
        <Container className="pagination-container">
          <div>{paginationBasic}</div>
        </Container>
      </Container>
    );
  }
}

У меня также есть живой пример моего кода: https://codesandbox.io/s/mapit-mockup-ftlru?file= / src / component / Main. js: 0-7664

...