• Проблема такого рода : при срабатывании infinite блоки накладываются друг на друга.

    Что я делал :
    1. Подключил сам скрипт masonry
    2. Установил и настроил плагин infinite
    3. Простенький js

    $('.masonry-gallery').masonry({
          itemSelector: '.masonry-post',
          isResizeBound: false,
          resizeable: true
      });

    4. Простенький код шаблона блока (bootstrap)

    <div class="container">
        <div class="row">
            <div class="col-lg-12 masonry-gallery" >
                <?php
                    if ( have_posts() ) {
                        while ( have_posts() ) {
                            the_post(); ?>
                            <div <?php post_class('col-xs-12 col-sm-3 col-md-3 col-lg-3 masonry-post') ?>  id="post-<?php the_ID(); ?>" >
                                <div class="thumbnail">
                                    <figure><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'responsive'));?></figure></a>
                                    <div class="caption">
                                            <h4><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
                                            <div class="entry">
                                                <?php the_content(); ?>
                                            </div>
                                            <div class="meta">
                                                <hr/>
                                                <i class="fa fa-calendar"></i> <?php the_time('F jS, Y') ?>
                                                <i class="fa fa-user"></i> <?php the_author() ?>
                                            </div>
                                            <div class="postmetadata">
                                                <?php the_tags('Tags: ', ', ', ''); ?>
                                                <?php the_category(', ') ?>
                                            </div>
                                      </div>
                                </div>
                              </div>
                <?php         } // end while
                    } // end if
                ?>
            </div>
        </div>
    </div>

    И в итоге : скриншот http://piccy.info/view3/6229661/a247e4cc41b1bdae0031189f9fb94a3d/
    Уф. Все нервы сьел этот скрипт плитки.
    Заранее очень благодарен.

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • Все нервы сьел этот скрипт плитки.

    А Вы не нервничайте, попробуйте css поправить например. Или ссылку на сайт с проблемой выложить. Ну или на крайний и полезный случай разместить все здесь

    Я нашел причину уже, но не знаю как решить.

    1. Скрипт masonry добавляет каждому элементу стили, а конкретно позиционирование.
    2. При срабатывании infinite scroll скрипт masonry не добавляет стилей.

    Оно в прицепи логично, потому что в моем js стоит

    `jQuery(document).ready(function($){

    Грубо говоря работать так не будет, потому что скрипт masonry срабатывает при загрузке страницы , а infinite подгружает только кусок. Вот и схожу с ума… =(

    Собственно как на скриншоте

    http://piccy.info/view3/6237568/07ac9fbaaa286007f650a3629b6c935c/orig/

Просмотр 3 ответов — с 1 по 3 (всего 3)

Тема «Проблема masonry + infinite scroll» закрыта для новых ответов.