Mason

lpc_template.queue.masonGallery = function ($self) {
        let $block = $self.find('.lpc-masonry-init');

        if ($block.length) {
            $block.each(function () {
                let $this = $(this);
                let grid = $this.find(".lpc-image-mason__list");
                let allItems = $this.find(".lpc-image-mason__item");
                let lazyLoadItemCount = 8;

                function resizeGridItem(item) {
                    let rowHeight = parseInt(grid.css("grid-auto-rows"));
                    let rowGap = parseInt(grid.css("grid-row-gap"));

                    let rowSpan = Math.ceil(
                        (item.querySelector('.lpc-image-mason__image').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap)
                    );
                    $(item).css("grid-row-end", "span " + rowSpan);

                    let image = $(item).find('.lpc-image-mason__image');
                    image.css("height", "100%");
                }

                function resizeAllGridItems() {
                    allItems.each(function (index, element) {
                        resizeGridItem(element);
                    });
                }

                /*function showLazyLoadedItems() {
                    allItems.slice(0, lazyLoadItemCount).addClass('is-show'); // Показать первые 8 блоков
                }*/

                /*function hideRemainingItems() {
                    allItems.slice(lazyLoadItemCount).removeClass('is-show'); // Скрыть остальные блоки
                }*/

                function showLazyLoadedItem(item) {
                    $(item).addClass('is-show');
                }

                // $(document).ready(function () {
                //  setTimeout(function () {
                //      imagesLoaded(grid[0], function () {
                //          resizeAllGridItems();
                //          showLazyLoadedItems(); // Показать первые 8 блоков после загрузки изображений
                //          hideRemainingItems(); // Скрыть остальные блоки
                //      });
                //  }, 500);
                // });
                const imageObserver = new IntersectionObserver((entries, imgObserver) => {
                    entries.forEach((entry) => {
                        if (entry.isIntersecting) {
                            const lazyItem = entry.target;
                            const img = lazyItem.querySelector('img[data-src]');

                            if (img) {
                                img.onload = function() {
                                    imgObserver.unobserve(lazyItem);
                                    resizeGridItem(lazyItem);
                                    showLazyLoadedItem(lazyItem);
                                };

                                img.src = img.dataset.src;
                                img.removeAttribute('data-src');
                            }
                        }
                    });
                });

                allItems.each(function (index, item) {
                    imageObserver.observe(item);
                });

                grid.addClass('after-grid-init');

                /*const showBlocks = () => {
                    const windowHeight = $(window).height();
                    const windowTop = $(window).scrollTop();
                    const windowBottom = windowTop + windowHeight;

                    allItems.each(function () {
                        const itemTop = $(this).offset().top;
                        const itemBottom = itemTop + $(this).outerHeight();

                        if ((itemTop >= windowTop && itemTop <= windowBottom) ||
                            (itemBottom >= windowTop && itemBottom <= windowBottom)) {
                            $(this).addClass('is-show');
                        }
                    });
                };*/

                //showBlocks();

                /*$(window).on('scroll', showBlocks);*/

                /*if (!s3LP.is_cms) {
                    let resizeTimeout;

                    $(window).on('resize', function () {
                        if (resizeTimeout) {
                            clearTimeout(resizeTimeout);
                        }

                        resizeTimeout = setTimeout(function () {
                            resizeAllGridItems();
                        }, 50);
                    });
                };*/
            });
        }
    };