Tengo un <div>
que contiene imágenes en miniatura, y usando CSS Grid cada vez que se añaden imágenes a ese div, se va rellenando hasta que ocupa todo el ancho de la pantalla y luego comienza a crecer hacia abajo . Cómo puede que sean muchas imágenes, no quiero que el usuario haga scroll infinitamente hacia abajo para ver todas sus imágenes, sino que mi intención es colocar un elemento de "paginación" debajo, dónde pulsando la siguiente página se cargen las siguientes imágenes.
El problema es que desconozco como indicar al programa que deje de cargar imágenes en la primera página, y comience en la segunda, ya que dependiendo del dispositivo (móvil, tablet, escritorio...etc), la altura será muy diferente. Por tanto lo único que se me ocurre es si hubiese alguna funcionalidad en CSS/DOM para saber si el <div>
está ocupando por ejemplo, el 70% del alto de la pantalla. En ese caso si supiese eso, entonces podría hacer la funcionalidad de paginación que tengo planeada.
A continuación dejo el código y también una versión ejecutable en linea. Estoy usando React
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 Row from "react-bootstrap/Row";
import Pagination from "react-bootstrap/Pagination"
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Image from "react-bootstrap/Image";
import "./ownStyle.css";
import imagesToRender from "./data/data.json"
export default class Main extends Component {
render() {
let active = 1;
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 size="sm">{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">
{ imagesToRender.map((image) => (
<Image key={image.id} src={image.name} />
)) }
</Container>
<Container className="pagination-container">
{paginationBasic}
</Container>
</Container>
);
}
}
height
de tus imágenes, obtener elheight
del dispositivo, hacer un poco de matemáticas y obtienes el resultado que deseas. Otra forma es editar tu numero de imagenes que te entrega paginate por dispositivo, Ej: computadoras portatiles: 25 imagens por pagina, tabletas: 18 x pagina, celulares: 10 x pagina. solo es una idea.