Некорректный вывод постов с jQuery Masonry

👍 Научим создавать сайты на WordPress бесплатно за 19 уроков. Подробнее →

Подключил к постам jQuery Masonry. Вот только вывод работает не совсем корректно. Некоторые посты встают поверх других.
Подскажите, пожалуйста, как решить данную проблему?

Скрин
Страница с постами

Создай свой первый сайт на WordPress

Poptimistic
Оцените автора
Добавить комментарий

  1. tiaurus

    Посмотрел на страницу с постами — выглядит корректно.

    Ответить
  2. Poptimistic автор

    в Хроме отображает некорректно.

    Ответить
  3. Poptimistic автор

    Попробуйте в Хроме обновить несколько раз страницу

    Ответить
    1. alexgff

      Masonry требует допиливания, либо меняйте jQuery плагин

      Ответить
      1. Poptimistic автор

        jQuery последний стоит 1.10.1
        Как понять «требует допиливания»?

        Ответить
        1. alexgff

          требует доработки на стороне клиента

          Ответить
  4. DimaDodonov

    Некоторые посты друг на друге лежат! такое чувство что вы с дивами напутали…

    Ответить
    1. Poptimistic автор

      С дивами вроде все в порядке.

      Вот код:

      <?php if (have_posts()) : ?>
      <div id="post-area">
      <?php while (have_posts()) : the_post(); ?>	
      
      <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      
      <?php if ( has_post_thumbnail() ) { ?>
      <div class="gridly-image"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'summary-image' );  ?></a></div>
            <?php } ?>
      <div class="gridly-copy"><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
      <p class="gridly-date"><?php the_time(get_option('date_format')); ?> </p>
               </div>
      
             </div> <!-- post -->
      <?php endwhile; ?>
      </div> <!-- post-area -->
      <?php else : ?>
      <?php endif; ?>

      Javascript в header:

      <script type="text/javascript">
      jQuery(document).ready(function($){
        $('#post-area').masonry({ singleMode: true});
      });
      </script>

      СSS

      #post-area .post { width:290px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:20px;  }
      #post-area .post .gridly-copy { width:250px; margin-left:auto; margin-right:auto; padding-top:10px; padding-bottom:20px; overflow:hidden; clear:both;}
      #post-area .post .gridly-date { width:150px;color:#8e8e8e; font-size:11px; padding-bottom:0; padding-top:0; margin: 0;}
      .gridly-image { z-index:5; }
      Ответить
  5. Den3er

    Столкнулся с такой же проблемой и время от времени посты некорректно загружаются. Подскажите, какие есть альтернативы этому плагину?

    Ответить
    1. Poptimistic автор

      Нашел решение:
      подключите imagesloaded
      вот мой код js:

          <script type="text/javascript">
      jQuery(document).ready(function($){
        $('#post-area').masonry({ singleMode: true});
        
       var $container = $('#post-area').masonry();
      // layout Masonry again after all images have loaded
      $container.imagesLoaded( function() {
        $container.masonry();
      });
        
      });
      </script>
      Ответить
      1. Den3er

        Спасибо!

        Ответить