砌体网格重叠页脚内容

时间:2017-08-17 05:18:11

标签: javascript jquery css jquery-masonry masonry

我在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>

enter image description here

3 个答案:

答案 0 :(得分:5)

在满载图像之前,砌体正在射击。您可以使用imagesLoaded(在页面上加载)来确定图像何时加载到容器中。然后解雇砌体。类似的东西:

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

答案 1 :(得分:1)

我刚刚发现了另一种解决方法:我创建了一个具有正确大小的canvas元素,而不是仅加载和放置图像。该“画布”用作占比计算的占位符。图像绝对位于顶部。

注意:您需要知道图像的大小/比率。就我的wordpress而言,它们嵌入在json调用中。

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

答案 2 :(得分:0)

对我来说,解决此问题的只是将元素附加到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);

    }
});