1

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>
    );
  }
}

5
  • 2
    ¿Las imágenes mantienen relación uniforme (son todas de misma altura y ancho) entre ellas? Si ese fuera el caso (que por un tema de buen diseño UX, debería ser así), más que calcular si el elemento ocupa un porcentaje de la altura para decidir si paginas las siguientes imagenes, en mi opinión deberías adaptar una cantidad horizontal y vertical máxima de imagenes de acuerdo al tamaño del viewport y su orientación (portrait o landscape) y subir o bajar este valor de acuerdo a un sistema de responsive breakpoints. Saludos Commented el 1 may. 2020 a las 15:46
  • Estoy muy de acuerdo con Mauricio Contreras, debes de conocer los height de tus imágenes, obtener el height 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.
    – Shassain
    Commented el 1 may. 2020 a las 15:59
  • @Shassain Si, tengo el mismo height para todas las imágenes.¿ El height del dispositivo no se puede conocer automáticamente imagino, no? Habia pensando hacer más o menos eso, pero evitando haciéndolo manualmente. Commented el 2 may. 2020 a las 8:41
  • 1
    @JavierCake, el tamaño del dispositivo se consigue con $(window).heigth(), y el tamaño del documento con $(document).heigth(), ambos con jquery/javascript, no con css.
    – Shassain
    Commented el 2 may. 2020 a las 13:36
  • Genial, creo que eso me servirá. Commented el 2 may. 2020 a las 15:10

1 respuesta 1

0

te dejo una lógica básica que creo que podría servirte, ya que responde al objeto de tu pregunta sin entrar en detalles de implementación o lógica para la carga de los datos.

const test = document.getElementsByClassName("test");
const vermas = document.getElementById("vermas");

const itemHeight = 100;
const initialHeight = window.innerHeight - 99;
let page = 1;

function updateList () {
  for (let i = 0; i < test.length; ++i) {
    if (itemHeight * (i + 1) > initialHeight * page) {
      test[i].style.display = "none"
    } else {
      test[i].style.display = "block"
    }
  }
}

vermas.addEventListener('click', function() {
  page++
  updateList();
})

updateList();
.test {
  height : 100px;
  border: 1px solid red;
}

#vermas {
  position: fixed;
  top: 0;
  left: 0;
}
<button id="vermas">ver mas</button>
<div class="test" >test 1</div>
<div class="test" >test 2</div>
<div class="test" >test 3</div>
<div class="test" >test 4</div>
<div class="test" >test 5</div>
<div class="test" >test 6</div>
<div class="test" >test 7</div>
<div class="test" >test 8</div>
<div class="test" >test 9</div>
<div class="test" >test 10</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.