0

Tengo un div donde quiero mostrar una galería de imágenes. Estas imágenes vienen de la base de datos, el resultado que quiero lograr es algo como lo siguiente:

introducir la descripción de la imagen aquí

Pero lo que logro es algo así (las imágenes no se acomodan al div):

introducir la descripción de la imagen aquí

El código que llevo es este:

HTML

<div class="col-md-12">
     <div id="imgSlide" class="">
          <hr>              
          <div id="columnasSlide"></div>    
     </div>
</div>

JS

//Jala las fotos del sistema
$(document).on("click", ".modalEditar", function () {
    var eventId = $(this).data('id');
    $.ajax({
        url: "traerPathFotos",
        method: "GET",
        data: { id: eventId },
        async: false,
        dataType: "json",
        success: function (respuesta) {
            $('#columnasSlide').html(' ');
            console.log(respuesta);
            if (respuesta != "") {
                $('#columnasSlide').html("");
                for (var i = 0; i < respuesta.length; i++) {
                    $('#columnasSlide').append('<span><i class="fa fa-times btn btn-danger"></i></span><div id="bloque"><img src="/Images/ActivosImages/imagepath/' + respuesta[i] + '" class="img-thumbnail"></div>');
                }
            } else { }
        }
    });

});

CSS

#columnasSlide {
    position: relative;
    margin: 20px auto;
    height: auto;
    text-align: center;
    border: 2px dashed #ccc;
    color: #999;
    padding: 20px;
}

#columnasSlide #bloque {
    position: relative;
    margin: auto;
    width: 200px;
    height: auto;
}

#columnasSlide i {
    position: absolute;
    top: 6px;
    right: 6px;
    background-color: red;
    border-radius: 3px;
}

¿Cómo puedo hacer para que las imágenes se acomoden como en la imagen 1?

PS: ¿Afecta en algo que esté en un modal? (para efectos de acomodo)

2 respuestas 2

2

Varios puntos aqui.

Primero deberías conocer la diferencia entre elementos en linea y de bloque. Los elementos de línea se pueden mantener varios en una misma línea o renglon, mientras que los elementos de bloque ocupan toda una sección horizontal. Un elemento <span> es un elemento en linea y un elemento <div> es un elemento tipo bloque, por lo que al tener combinados elementos en bloque y en linea al mismo nivel, el cual es el caso al agregar las imágenes en el javascript resulta que todos los divs se enciman uno de otro y los span ocupan un nuevo renglon.

La primera modificación entonces es que tanto el boton de eliminar como el div que contiene la imagen estén contenidos en un solo elemento de bloque. Tu codigo js agregaría elementos de esta manera

 $('#columnasSlide').append('<div class="wrapper-div"><span><i class="fa fa-times btn btn-danger"></i></span><div id="bloque"><img src="/Images/ActivosImages/imagepath/' + respuesta[i] + '" class="img-thumbnail"></div></div>');

Ahora que estan contenido en un wrapper, hay que especificarles a esos contenedores mediante css que tienen que tener un ancho máximo y que pueden estar varios div en una misma línea horizontal, esto lo hacemos con el attributo float. El atributo position nos permitirá hacer que el icono de cerrar se sitúe en la esquina

.wrapper-div{
    float:left; /*Acomoda horizontalmente los contenedores*/
    width:150px;
    height:180px;
    border: 0 solid;
    padding:0;
    margin:10px;
    position:relative; /*Permite usar position:absolute en el icono de cerrar, para posicionarlo justo en la esquina*/
}

Te recomiendo también reemplazar los ids por clases, sobre todo si se van a repetir por lo que cambia el id bloque por una clase llamada bloque. Y por consecuencia se modificara el css.

Para reposicionar el icono de cerrar en la esquina, este debe estar en posición absoluta, pero el elemento que lo contiene debe tener posición relativa:


#columnasSlide span {
  display:inline-block; /*Para indicar que se comporte como bloque y en linea*/
}
#columnasSlide i {
    position: absolute; /*Para que se sitúe en la esquina. EL elemento que lo contiene debe tener position:relative;*/
    top: 6px;
    right: 6px;
    background-color: red;
    border-radius: 3px;
    display:inline-block;
}

Por ultimo para que el elemento #columnaSlide pueda crece a medida que se agregan las imágenes, hay que agregar un clearfix. Este es un hack muy conocido en css y se agrega de esta manera


.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

y en el html hay que asignarle esa clase al elemento mencionado

<div id="columnasSlide" class="clearfix">

Aqui te pongo un link de como quedaría el resultado https://jsfiddle.net/zdqyf182/

Para conocer más de los elementos en línea y bloque pudieras ver este link https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements

1
  • 1
    Para que columnaSlide pueda crecer a medida que se le agregan las imágenes, otro truco es asignarle un overflow diferente de visible. Esto creará un nuevo contexto de formato de bloque. +1
    – ElChiniNet
    el 18 oct. 2019 a las 19:38
2

Flexbox puede serte de ayuda en este caso. Añade estas propiedades al contenedor columnasSlide y obtendrás lo que deseas:

#columnasSlide {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
  • display: flex, aplicará el módulo de caja flexible al contenedor
  • flex-wrap: wrap hará que los elementos no se queden en una sola línea, sino que pasen a una nueva línea cuando no quepan en el contenedor
  • justify-content: center hará que los elementos queden alineados al centro en vez de distribuir el espacio entre ellos (puedes usar align-start si deseas que estén alineados a la izquierda)

Aquí te dejo un ejemplo, insertando en el contenedor algunas imágenes dinámicamente:

var $contenedor = $('#columnasSlide');
var template = $('#slide').html();
var imagenes = [ 'img_nature_wide.jpg', 'img_snow_wide.jpg', 'img_lights_wide.jpg', 'img_mountains_wide.jpg' ];

// Insertar las imágenes
imagenes.forEach(function(path) {
  $contenedor.append(template.replace('{{image}}', 'https://www.w3schools.com/howto/' + path));
});
#columnasSlide {
  border: 2px dashed #ccc;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  justify-content: center;
  margin: 20px auto;
  padding: 20px;
  position: relative;
}

#columnasSlide #bloque {
  margin: 5px;
  position: relative;
  width: 200px;
  height: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-12">
  <div id="imgSlide" class="">
    <hr>
    <div id="columnasSlide"></div>
  </div>
</div>

<template id="slide">
  <div id="bloque">
    <img src="{{image}}" class="img-thumbnail">
  </div>
</template>

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.