Question

我已经阅读了类似的问题，但找不到适用于我案件的任何内容。

在ajax调用之后，我将li元素附加到ul

$.ajax({
        url: 'do_load_gallery.php?load=all'
    }).done(function(result) {

        var data = jQuery.parseJSON(result);

        var count = data.length;

        $.each(data, function (index,val) {

            var $item = $(val);

            var $container = $('#gallery_masonry');#is my ul element
            // initialize
            $container.masonry({
                itemSelector: 'li'
            });
            $container.append( $item ).masonry( 'appended', $item );

            if (!--count) {
                $(window).trigger('resize');
            }
        });
    });

每个li元素都包含一个图像，宽度为25％，所以我无法知道图像的高度。问题是，我第一次尝试此代码时它不起作用，但如果我重新加载页面或更改窗口大小砌体适用。

任何想法如何在窗口上触发调整大小以便正确应用砌体？上面的代码（用于调整大小）不起作用

我在特里观察后发现的解决方案

......
var count = data.length;    
$.each(data, function (index,val) {

                var $items = $(val);
                // initialize
                var $container = $('#gallery_masonry').masonry({element: 'li'});
                $container.append( $items ).masonry( 'appended', $items );
                if (!--count) {
                    $container.imagesLoaded( function() {
                        $container.masonry('layout');
                        $('.mg_wrap').niceScroll();
                    });
                }
            });

Answer 1

为了进一步详细说明我的评论，第一次运行时图像尺寸看起来不正确的原因很简单：浏览器从远程服务器而不是从自己的缓存加载图像。当前者发生时，浏览器实际上无法访问自然尺寸，因此无法访问图像的宽高比。

当发生这种情况时，砌体无法知道图像占用多少空间，因此布局的计算将失败（从某种意义上说，它似乎不会影响图像的大小）。为了避免这种情况，您必须在触发砌体布局之前预加载图像，或等待图像加载。这样做是因为这可以确保浏览器可以访问图像尺寸，砌体可以从中正确地计算布局。

使用imagesLoaded插件，砌体文档有一个很好的例子：http://masonry.desandro.com/layout.html#imagesloaded

砌体插件图像超过其他

1 个答案: