Изображение масонария неправильно позиционируется при вызове ajax

ProgramBox

Изображение масонария неправильно позиционируется при вызове ajax

Post author:admin
Запись опубликована:12 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #masonry

Вопрос:

Я использую https://masonry.desandro.com/ v4.2.2 и минимальный код выглядит так:

 <div class="fk-grid-container" id="ajax-concepts">
<?php
//This is just the wordpress loop and currently its looping and showing 3 items
//LOOP START
while ( $the_query->have_posts() ) :
    $the_query->the_post();
    $thumbnail_url = get_the_post_thumbnail_url('','full');
?>
    <div class="fk-grid-item">
        <a href="<?php echo $thumbnail_url; ?>" class="gallery-link">
            <div
                    class="boxes"
                    data-aos="fade-down"
                    data-aos-duration="2000"
            >
                <div class="images-box">
                    <img
                            src="<?php echo $thumbnail_url; ?>"
                            class="img-fluid"
                            alt="<?php the_title(); ?>"
                    />
                </div>
            </div>
        </a>
    </div>
<?php
//LOOP END
endwhile;
wp_reset_postdata();
?>
</div>

И я инициализировал его как :

 jQuery(".fk-grid-container").imagesLoaded(function () {
    jQuery(".fk-grid-container").masonry({
        itemSelector: ".fk-grid-item",
        gutter: 30,
    });
    AOS.refresh();
});

До этого момента все было нормально, теперь при нажатии «Загрузить больше» я выполняю вызов ajax, и при успешном выполнении он возвращает html как:

 <div class="fk-grid-item">
   <a href="http://famous.test/wp-content/uploads/2021/08/02.png" class="gallery-link">
      <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
         <div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/02.png"  class="img-fluid"  alt="Image 3" /></div>
      </div>
   </a>
</div>
<div class="fk-grid-item">
   <a href="http://famous.test/wp-content/uploads/2021/08/05.png" class="gallery-link">
      <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
         <div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/05.png"  class="img-fluid"  alt="Image 2" /></div>
      </div>
   </a>
</div>
<div class="fk-grid-item">
   <a href="http://famous.test/wp-content/uploads/2021/08/06.png" class="gallery-link">
      <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
         <div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/06.png"  class="img-fluid"  alt="Image 1" /></div>
      </div>
   </a>
</div>

и мой успех в ajax:

 success: function(data){
    var $data = jQuery(data);
    if($data.length){
        jQuery(".fk-grid-container").append(data).masonry( 'reloadItems' );
        AOS.refresh();
    }
},

Но с помощью этого кода изображение не выровнено по правильному положению и отображается как:

Вот как это выглядело изначально:

Как это должно выглядеть:

Обновить:

Я пробовал с:

 var $grid = $('.fk-grid-container');
$grid.masonry()
    .append( $data )
    .masonry( 'appended', $data )
    .layout();
AOS.refresh();

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

1. Снова init, как $grid.masonry('layout'); Вы можете проверить метод по этой ссылке masonry.desandro.com/methods.html или добавьте больше элементов, подобных этому методу $grid.masonry( 'appended', elements ) , поэтому проверьте ссылку и найдите нужный вам метод.

2. Я обновил код до: var $grid = $('.fk-grid-container'); $grid.masonry() .append( $data ) .masonry( 'appended', $data ) .layout(); AOS.refresh(); Но он не толкает контейнер, это означает, что макет в какой-то степени кажется правильным, но он перекрывается со следующим контейнером вместо увеличения высоты текущего контейнера.

Ответ №1:

При дополнительной загрузке похоже, что вы неправильно используете imagesLoaded .

Давайте взглянем на ваш код инициализации:

 jQuery(".fk-grid-container").imagesLoaded(function () {
    jQuery(".fk-grid-container").masonry({
        itemSelector: ".fk-grid-item",
        gutter: 30,
    });
    AOS.refresh();
});

выше один правильный

Но, в случае успеха (согласно вашему последнему обновлению), вы делаете так, как:

 var $grid = $('.fk-grid-container');
$grid.masonry()
    .append( $data )
    .masonry( 'appended', $data )
    .layout();
AOS.refresh();

На самом деле, приведенный выше код каким-то образом верен, вам просто нужно обновить макет после загрузки всех изображений, и вам нужно обновить эту layout часть masonry (потому что похоже, что вы используете jquery). Точно так же, как здесь, упомянуто в первом блоке https://masonry.desandro.com/methods.html

Итак, окончательный код должен выглядеть следующим образом:

 var $grid = $('.fk-grid-container');
//appending the data on the grid 
$grid.masonry()
    .append( $data )
    .masonry( 'appended', $data );


$grid.imagesLoaded(function(){
//once images are fully loaded, you update the layout
    $grid.masonry();
    AOS.refresh();
});

Надеюсь, это поможет

Ответ №2:

Вам нужно использовать appended amp; reloadItems метод после нажатия на кнопку, чтобы загрузить больше, а затем вызвать imageLoaded метод, чтобы проверить, загружены все изображения или нет, затем снова нужно вызвать layout метод в кладке для настройки(обновления) элементов.

методы кладки Полезные ссылки для:
https://masonry.desandro.com/methods.html#layout-masonry
https://masonry.desandro.com/methods.html#appended
https://masonry.desandro.com/methods.html#reloaditems

Я надеюсь, что приведенный ниже фрагмент текста вам очень поможет.

 var $grid = $('#ajax-concepts') //grid container

$grid.imagesLoaded().done(function (instance) {
    $grid.masonry({
        itemSelector: ".fk-grid-item",
        gutter: 30,
    });
    // Initialize AOS plugin
    AOS.init();
});

// $data like ajax success items
var $data = `<div class="fk-grid-item">
        <a href="#" class="gallery-link">
            <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
                <div class="images-box">
                    <img src="https://via.placeholder.com/400x650/099900/" class="img-fluid" alt="Title" />
                </div>
            </div>
        </a>
    </div>
    <div class="fk-grid-item">
        <a href="#" class="gallery-link">
            <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
                <div class="images-box">
                    <img src="https://via.placeholder.com/400x300/999000/" class="img-fluid" alt="Title" />
                </div>
            </div>
        </a>
    </div>
    <div class="fk-grid-item">
        <a href="#" class="gallery-link">
            <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
                <div class="images-box">
                    <img src="https://via.placeholder.com/400x220/000000/" class="img-fluid" alt="Title" />
                </div>
            </div>
        </a>
    </div>`;

$(document).on('click', '#loadmore', function() { 
    $grid.masonry().append($data).masonry('appended', $data).masonry('reloadItems');
    $grid.imagesLoaded(function () {
        //once images are fully loaded, you update the layout
        $grid.masonry('layout');
        // Initialize AOS plugin after append new items
        AOS.init();
        //Page scroll down at load more button 
        $('html, body').animate({
            scrollTop: $("#loadmore").offset().top
        },1500);
    });
});

 * { box-sizing: border-box; }
.fk-grid-container{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.fk-grid-container:after {
    content: '';
    display: block;
    clear: both;
}
.fk-grid-item{
    max-width: calc(33.333333% - 30px);
    margin-bottom: 30px;
}
.img-fluid{
    max-width: 100%;
    display: block;
}
@media(max-width: 768px){
    .fk-grid-item{
        max-width: calc(50% - 30px);
    }
}

 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<div class="fk-grid-container" id="ajax-concepts">
    <div class="fk-grid-item">
        <a href="#" class="gallery-link">
            <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
                <div class="images-box">
                    <img src="https://via.placeholder.com/400x500/0000FF/" class="img-fluid" alt="Title" />
                </div>
            </div>
        </a>
    </div>
    <div class="fk-grid-item">
        <a href="#" class="gallery-link">
            <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
                <div class="images-box">
                    <img src="https://via.placeholder.com/400x300/FF00FF/" class="img-fluid" alt="Title" />
                </div>
            </div>
        </a>
    </div>
    <div class="fk-grid-item">
        <a href="#" class="gallery-link">
            <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
                <div class="images-box">
                    <img src="https://via.placeholder.com/400x600/00FFFF/" class="img-fluid" alt="Title" />
                </div>
            </div>
        </a>
    </div>
    <div class="fk-grid-item">
        <a href="#" class="gallery-link">
            <div class="boxes" data-aos="fade-down" data-aos-duration="2000">
                <div class="images-box">
                    <img src="https://via.placeholder.com/400x450/09F900/" class="img-fluid" alt="Title" />
                </div>
            </div>
        </a>
    </div>
</div>

<div style="text-align: center; padding: 20px; clear: both;">
    <button type="button" style="padding: 10px 40px;" id="loadmore">Load More</button>
</div>

Метки: Изображение масонария неправильно позиционируется при вызове ajax

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Ошибка сборки Android — MethodHandle.invoke и MethodHandle.invoke поддерживаются только начиная с Android O (—min-api 26) (poi apache)

Обновить поток токенов потоком кода авторизации

* ngIf не переключается обратно на false в блоке else