砌体网格重叠页脚内容

Question

我在grid class和grid-items中使用了砌体布局。我在加载事件中加载砌体，如下所示

$(window).load(function () {
$('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    horizontalOrder: true,
    isAnimated: true,
    animationOptions: {
        duration: 1000,
        easing: 'linear',
        queue: false
    }
});
});

我的 HTML 在下面，我正在通过 ajax 加载项目。有时它加载正确，有时与我的页脚内容或 div 重叠。如下图所示。

<div class="grid">
    <div class="grid-item">
        <img src="images/grid1.jpg" alt="Banner"></a>
    </div>
</div>

Answer 1

Masonry 在图像完全加载之前就开始射击了。您可以使用 imagesLoaded（正在加载到您的页面上）来确定图像何时加载到容器中。然后开火砌体。类似于：

var $container = $('#masonry-grid');
$container.imagesLoaded(function(){
  runMasonry();
});

Answer 2

我刚刚找到了一个替代修复方法：我创建了一个具有正确尺寸的 canvas 元素，而不是仅加载和放置图像。此 »canvas« 用作比率计算的占位符。图像以绝对位置位于顶部。

警告：您需要了解图像 sizes/ratio。在我的 wordpress 案例中，它们嵌入在 json 调用中。

它甚至可以在 Internet Explorer 11 中运行。

Answer 3

对我来说解决这个问题的方法是在 setTimeout 函数中附加元素。

$.ajax({
    url: ajaxURL,
    type: 'post',
    data: {
        page: page,
        action: 'load_more'
    },
    success: function(response) {
        let el = $(response)

        that.data('page', newPage);
        setTimeout(function() {
            $('#masonry').append(el).masonry('appended', el, true);
        }, 1000);

    },
    error: function(response) {
        console.log(response);

    }
});

砌体网格重叠页脚内容

Masonry Grid overlapping footer content

javascript

css

jquery

jquery-masonry

masonry