👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →
Подключил к постам jQuery Masonry. Вот только вывод работает не совсем корректно. Некоторые посты встают поверх других.
Подскажите, пожалуйста, как решить данную проблему?
Скрин
Страница с постами
Посмотрел на страницу с постами — выглядит корректно.
в Хроме отображает некорректно.
Попробуйте в Хроме обновить несколько раз страницу
Masonry требует допиливания, либо меняйте jQuery плагин
jQuery последний стоит 1.10.1
Как понять «требует допиливания»?
требует доработки на стороне клиента
Некоторые посты друг на друге лежат! такое чувство что вы с дивами напутали…
С дивами вроде все в порядке.
Вот код:
<?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; }Столкнулся с такой же проблемой и время от времени посты некорректно загружаются. Подскажите, какие есть альтернативы этому плагину?
Нашел решение:
подключите 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>Спасибо!