2

Buenas, hace poco escribí una pregunta para poder organizar divs con diferentes alturas en columnas. Resulto ser una pregunta ya respondida: ¿Como puedo crear columnas desorganizadas en bootstrap?

El caso es que lo estoy probando y me funciona cuando lo trabajo aquí o fuera de la web. Cuando lo llevo a la página web hay algún error que hace que no funcione correctamente. Imagino que será algún problema con algún otro js.

A veces, no siempre se me montan unos div con otros, como si no reconociera el heigth del div y al estar en position:absolute, se solapan. Para verlo, en el caso de que se vea correctamente hay que actualizar con ctrl+F5. Cuando redimensiono la ventana del explorador(crhome) se corrige el error y se reorganiza.

La página es: https://www.joaquinlois.com/organos/restauracion-organos-historicos/

Cuando queda carga mal se ve así: introducir la descripción de la imagen aquí

Debería de verse así: introducir la descripción de la imagen aquí

He estado trabajando el código aquí y claro, al no tener otros js se ve correctamente, he creado un pen en codepen y le he añadido librerías que tengo cargadas en la web, pero nada, no doy con el error. Dejo el código aquí, aunque este no tiene problemas.

article.featured-organo{ margin-bottom:30px; display:block; text-align:center;}
article.featured-organo img{ width:90%; margin:0px auto;}
h1{text-align:center; margin-bottom:100px}
h4{font-size:14px; color:#999; font-style:italic; margin-bottom:10px;}
.content-features-organos{max-width:1200px; margin:0px auto;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://www.joaquinlois.com/wp-content/themes/joaquinlois/css/joaquinlois.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h1>Masonry</h1>

<div class="grid content-features-organos">
  <article class="grid-item featured-organo col-sm-3">
    <hgroup>
      <h3>Órgano<br> de Tordesillas<br>.<br>.<br>.</h3>
      <h4>Nombre <br>del templo</h4>
    </hgroup>
    <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_sanpedro_general-200x200.jpg" />
  </article>
  <article class="grid-item featured-organo col-sm-3">
    <hgroup>
      <h3>Órgano de <br>Salamanca</h3>
      <h4>Nombre del templo</h4>
    </hgroup>
    <img src="https://www.joaquinlois.com/wp-content/uploads/2015/05/salamanca_detalles_01-200x200.jpg" />
  </article>
  <article class="grid-item featured-organo col-sm-3">
    <hgroup>
      <h3>Órgano del <br>Espinar</h3>
      <h4>Nombre del templo</h4>
    </hgroup>
    <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_espinar_general-200x200.jpg" />
  </article>
  <article class="grid-item featured-organo col-sm-3">
    <hgroup>
      <h3>Órgano de Zuera<br>.<br>.<br>.</h3>
      <h4>Nombre del templos</h4>
    </hgroup>
    <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_zuera_general-200x200.jpg" />
  </article>
  <article class="grid-item featured-organo col-sm-3">
    <hgroup>
      <h3>Órgano de <br>Cordoba</h3>
      <h4>Nombre del templo</h4>
    </hgroup>
    <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/cordoba_general_II-200x200.jpg" />
  </article>
  <article class="grid-item featured-organo col-sm-3">
    <hgroup>
      <h3>Órgano de <br>La Seca</h3>
      <h4>Nombre <br> del templo</h4>
    </hgroup>
    <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/laseca_general-200x200.jpg" />
  </article>
  <article class="grid-item featured-organo col-sm-3">
    <hgroup>
      <h3>Órgano del Espinar</h3>
      <h4>Nombre del templos</h4>
    </hgroup>
    <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_espinar_general-200x200.jpg" />
  </article>
  <article class="grid-item featured-organo col-sm-3">
    <hgroup>
      <h3>Órgano de Fontiveros</h3>
      <h4>Nombre del templo</h4>
    </hgroup>
    <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_fontiveros_general-200x200.jpg" />
  </article>
  <article class="grid-item featured-organo col-sm-3">
    <hgroup>
      <h3>Órgano de ...</h3>
      <h4>Nombre del <br> templos</h4>
    </hgroup>
    <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_fontiveros_general-200x200.jpg" />
  </article>
  <script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>
  <script>
$('.grid').masonry({
  // options
  itemSelector: '.grid-item'
});
</script>

Adjunto también el código que tengo en la página, por si pudiera ser de ayuda, esta hecha en wordpress.

<section id="lista-organos">

	<div class="col-md-12">
		<div class="col-md-6">			
			<?php $recent = new WP_Query("page_id=180"); while($recent->have_posts()) : $recent->the_post(); ?>
				<h1><?php the_title(); ?></h1>	
    			<?php the_content(); ?>    
			<?php endwhile; ?>				
		</div>


		<div class="col-md-6">
			<?php $recent = new WP_Query("page_id=1006"); while($recent->have_posts()) : $recent->the_post(); ?>
			
  				<div class="grid content-features-organos">
					<?php if( have_rows('organ_repeater') ): ?>						
						<?php while( have_rows('organ_repeater') ): the_row(); 

							$image = get_sub_field('imagen_repeater');
							$size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
						?>
								<?php if(get_sub_field('new_restored_option', 'option') == 'restaurado') : ?>
									<article class="col-xs-6 col-sm-4 col-lg-3 featured-organo grid-item">
										<div class="featured-organo-content">
										<?php if(get_sub_field('title_repeater')): ?><h3><a href="<?php the_sub_field('link_repeater'); ?>"><span>órgano</span> <?php the_sub_field('title_repeater'); ?></a></h3><?php endif; ?>
										<?php if(get_sub_field('templo_repeater')): ?><h4> <?php the_sub_field('templo_repeater'); ?></h4><?php endif; ?>
										<?php if(get_sub_field('date_repeater')): ?><p class="fecha-organo"> (<?php the_sub_field('date_repeater'); ?>)</p><?php endif; ?>
											<a class="imagen" href="<?php the_sub_field('link_repeater'); ?>">
							                    <img title="Restauración del órgano de <?php the_sub_field('title_repeater'); ?>"
							                             src="<?php echo $image['sizes']['thumbnail'] ?>"
							                             alt="<?php if(ICL_LANGUAGE_CODE == 'es'): ?> Restauración de Órganos Históricos
															<?php elseif(ICL_LANGUAGE_CODE == 'en'): ?>	Historic Pipe Organs Restauration
															<?php elseif(ICL_LANGUAGE_CODE == 'de'): ?>	Historic Pipe Organs Restauration
															<?php elseif(ICL_LANGUAGE_CODE == 'pt'): ?>	Restauro de Orgãos Historicos<?php endif; ?>">
							                </a>
							            </div>
						             </article>
					            <?php endif; ?>				         	
						<?php endwhile; ?>						
					<?php endif; ?>
				</div>
			<?php endwhile; ?>
			
			<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>

			<script>
				$('.grid').masonry({  // options
			        itemSelector: '.grid-item'});
			</script>

	</div>
</section><!-- #post-## -->

He probado ha desactivar todos los plugins y tampoco

Bueno, creo que esto es todo, ando medio loko con esta chorrada. Gracias de antemano.

1
  • ¿Por qué estás cargando tres versiones diferentes de jQuery? Con una debería ser suficiente
    – Alvaro Montoro
    Commented el 10 feb. 2017 a las 3:40

1 respuesta 1

2

Creo que el problema está en que estás llamando a masonry() antes de que se hayan cargado las imágenes, por tanto el alto del contenedor (grid-item) no es el definitivo cuando se reposicionan. Sí funciona cuando recargas la página porque las imágenes ya se han cargado antes y tardan menos, estando listas cuando se hace la llamada a masonry().

Prueba a poner esto:

$( document ).ready(function() {
    $('.grid').masonry({
        itemSelector: '.grid-item'
    });
});

Al estar dentro del $(document).ready, se ejecutará cuando haya terminado de cargarse la página (incluídas las imágenes) y debería funcionar de manera correcta.

4
  • Buenas Alvaro, gracias, he probado a poner el $(document).ready y parece que va mejor, pero aun sigue dando el error de vez en cuando. Si le fuerzas lo hace. ¿Podría ser que estuviera diciendo a las imágenes que carguen después? Creo que no lo he hecho específicamente. Pero si parece tener que ver con el tiempo de carga de la página. Estoy intentando aligerar o reducir, pero dentro de mis limitaciones.
    – beweb
    Commented el 10 feb. 2017 a las 15:19
  • En cuanto a los jQuery repetidos, Cuales son? Creía que ahora solo tenia este: 1<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> Hay diferencias entre librerias jquery? de carga o de contenido? ademas de la actualidad de estas. Gracias de nuevo
    – beweb
    Commented el 10 feb. 2017 a las 15:27
  • 1
    @beweb En el mismo código que compartes en la pregunta puedes ver como estás incluyendo la versión 3.1.1 y la 2.1.1 (están dos líneas aparte). Y, visitando la página que enlazas, ayer podía ver esas dos más la 1.12.4 (tres en total); hoy sólo veo la 3.1.1 y la 1.12.4, no sé si has cambiado algo o si ayer no lo vi bien
    – Alvaro Montoro
    Commented el 10 feb. 2017 a las 15:37
  • Buenas Avaro, si, vi tu comentario y quite un js, pero creo que el 1.12.4 me lo carga el plugin WPML, lo suyo seria quitar ese no? Y dejar el más actual. Aunque este va a buscarlo la carpeta wp-includes
    – beweb
    Commented el 10 feb. 2017 a las 17:25

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.