0

当站点加载时，砌体箱首先排列在左侧（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;
          }
    });
});

}

4

1 回答 1

1

您可能错过了最重要的部分之一......

调用 init_masonry() 的内容，您也可以$container.masonry()使用随附的插件 .imagesLoaded() 进行包装。

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

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

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

于 2012-09-24T10:32:53.570 回答