javascript - 如何正确堆叠砌体布局和延迟加载图像？

Question

好的，我正在使用高级自定义字段为具有延迟加载和灯箱的 Wordpress 制作砖石布局样式库。

我有灯箱 (fancybox-v3) 和砖石布局 (macy.js) 工作，但是当我添加延迟加载时，我遇到了问题。我正在使用 jQuery.lazy

这是我的循环

<?php

// check if the repeater field has rows of data
if( have_rows('card') ):

    // loop through the rows of data
    while ( have_rows('card') ) : the_row();

        // display a sub field value inside a card
        ?> <div class="grid-item">
            <?php
            //VARIABLES//
            $title =  get_sub_field('card_title');
            $childImage = get_sub_field('card_picture');
            $file = get_sub_field('card_video');
            $video = $file['url'];
// check for image
            if( $childImage ): ?>
                <a data-fancybox="gallery" data-caption="My caption" href="<?php
                echo $childImage['url'];//big one here ?>">
                    <img class="lazy" data-src="<?php echo $childImage['url']; ?>">
                </a>

            <?php endif; ?>
//check for video
            <?php if( $video ): ?>
                <video class="gallery-video" loop autoplay>
                    <source src="<?php echo $video; ?>" type="video/mp4">
                </video
            <?php endif; ?>

        </div> <?php

    endwhile;

else :

    // no rows found

endif;

?>

当我使用 jQuery.lazy 和 macy.js 运行它时，我得到了这样一个不稳定的视觉结果:

您在底部看到的是一堆相互重叠的图像，我猜这是因为它们被延迟加载，macy.js 不知道如何按高度将它们隔开。

虽然我不知道如何解决这个问题？有什么建议吗？

我还在这个问题上找到了这个答案 Masonry and Lazy load integration

by klasske 似乎回答了，但我不确定我是否理解它(我是一名刚接触编码的设计师)

基本上，Klasske 是说他们应该创建一个名为 adjustHeights 的新函数，然后在 jQuery.lazy 的选项中调用它，对吗？我不清楚。

Answer 1

我想发布这个问题的答案，因为 future 的人可能会遇到同样的问题。我联系了开发人员，基本上我需要在砌体布局上调用重新计算函数，该函数位于每次将新图像加载到屏幕时都会触发的函数内。

最后的样子是这样的:

var macy_instance = Macy.init({
        container: '#grid',
        trueOrder: false,
        waitForImages: true,
        debug: true,
        margin: 0,
        columns: 3,
        breakAt: {
            1200: 3,
            940: 2,
            520: 1
        }
    });

macy_instance.runOnImageLoad(function () { macy_instance.recalculate(true); }, true);