Skip to main content
2 de 2
se eliminaron 96 caracteres en el cuerpo
beweb
  • 61
  • 1
  • 6

Problema con librería Masonry, no reconoce el height del div

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.

beweb
  • 61
  • 1
  • 6