【问题标题】: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);
        
            }
        });
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2018-10-25
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-11-19
          • 2017-06-16
          • 1970-01-01
          相关资源
          最近更新 更多