Question

当站点加载时，砌筑箱首先排列在左侧（http://herrfischerhamburg.de/re/），经过1或2秒后，它们将以正确的排水沟宽度排列。任何想法如何使它们在页面加载时直接用正确的装订线宽度排列？

function init_masonry(){
var $container = $('.content');
var gutter = 12;
var min_width = 250;
$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector : '.box',
        gutterWidth: gutter,
        isAnimated: true,
          columnWidth: function( containerWidth ) {
            var num_of_boxes = (containerWidth/min_width | 0);
            var box_width = (((containerWidth - (num_of_boxes-1)*gutter)/num_of_boxes) | 0) ;
            if (containerWidth < min_width) {
                box_width = containerWidth;
            }
            $('.box').width(box_width);
            return box_width;
          }
    });
});

}

Answer 1

你可能错过了一个最重要的部分......

什么是调用init_masonry（），还在随附的插件.imagesLoaded（）中包装$container.masonry()。

ImagesLoaded是一个插件，只有在所有图像都已完全加载后才会触发。砌体这样做是因为它不确定每块砖应该有多大。您可以采取的一种方法是在每个图像上设置高度和宽度（无论如何都应该这样做），然后不要使用imagesLoaded。这样你就不应该在砌体初始化和放置它之间得到延迟。

此外，您是否需要将isAnimated设置为true。这可能会加剧延迟，因为我相信默认延迟是750。

http://masonry.desandro.com/docs/animating.html

页面加载时jquery砌体装订线宽度

1 个答案: