砌体网格重叠页脚内容答案

【问题标题】：Masonry Grid overlapping footer content砌体网格重叠页脚内容
【发布时间】：2017-08-17 05:18:11
【问题描述】：

我在grid 类中使用了砌体布局，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>

【问题讨论】：

标签： javascript jquery css jquery-masonry masonry

【解决方案1】：

Masonry 在图像完全加载之前发射。您可以使用imagesLoaded（正在您的页面上加载）来确定图像何时加载到容器中。然后关掉 Masonry。比如：

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

【讨论】：

【解决方案2】：

我刚刚发现了一个替代解决方案：我创建了一个大小正确的画布元素，而不是仅仅加载和放置图像。这个»canvas«用作比率计算的占位符。图像的位置绝对位于顶部。

警告：您需要知道图像尺寸/比例。在我的 wordpress 案例中，它们嵌入在 json 调用中。

它甚至可以在 Internet Explorer 11 中使用。

【讨论】：

【解决方案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);

    }
});

【讨论】：