javascript - 动态 columnWidth 在 Masonry 中导致堆叠图像

Question

我正在尝试通过 Unify in Rails 4 重新创建 masonry 博客 View 。 http://htmlstream.com/preview/unify-v1.8/blog_masonry_3col.html

我购买了主题并将最新的 imagesLoaded 和 Masonry 文件包含在我的应用程序中(使用 bower-rails)。

• Masonry PACKAGED v3.3.2
• imagesLoaded PACKAGED v3.2.0

当使用主题提供的 js 文件时，所有图像都堆叠在一起。

截图1

$(document).ready(function(){
    var $container = $('.grid-boxes');

    var gutter = 30;
    var min_width = 300;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.grid-boxes-in',
            gutterWidth: gutter,
            isAnimated: true,
              columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.grid-boxes-in').width(box_width);

                return box_width;
              }
        });
    });
});

请看这个 js fiddle :http://jsfiddle.net/sdynfq83/

我注意到以下几点:

• 调整窗口大小或刷新并不能解决问题，所以我发现这不是图像加载错误。我花了很长时间才弄明白。
• 我的 html 代码似乎没问题，因为如果我从主题本身复制 HTML 代码并包含相同的 JS 和 CSS 文件，我会遇到同样的问题。
• “.grid-boxes-quote”框与其他网格框的宽度不同。这很奇怪，因为它们应该都是一样的，因为所有的盒子都有“.grid-boxes-in”类。 https://jsfiddle.net/sdynfq83/embedded/result/

当删除 columnWidth 代码并将其替换为固定数字 (300) + 向 grid-boxes-in 添加宽度时，它似乎起作用了。这不是我想要的，因为图像尺寸不再正确。

CSS

.blog_masonry_3col .grid-boxes-in {
    padding: 0;
    margin-bottom: 30px;
    border: solid 1px #eee;
    /* added width */
    width: 300px;

}

js

$(document).ready(function(){
    var $container = $('.grid-boxes');

    var gutter = 30;
    var min_width = 300;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.grid-boxes-in',
            gutterWidth: gutter,
            isAnimated: true,
              /*columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.grid-boxes-in').width(box_width);

                return box_width;
              }*/
            columnWidth: 300
        });
    });
});

js fiddle :http://jsfiddle.net/8c0r06a6/2/

主题本身提供了旧版本的 masonry 。代码似乎可以在其中运行。图像确实保持重叠(这可以通过调整窗口大小或刷新窗口来解决)。

截图2 屏幕截图 3

不过，我想更新到最新版本的 masonry 和加载的图像，这样我就可以继续使用 Bower 轻松更新这些文件。 我也希望使用最新版本的所有内容可以修复屏幕截图 2 中的重叠图像。我在下面有一个使用旧代码的 JS fiddle 。

/**
 * jQuery Masonry v2.1.05
 * A dynamic layout plugin for jQuery
 * The flip-side of CSS Floats
 * http://masonry.desandro.com
 *
 * Licensed under the MIT license.

http://jsfiddle.net/ytLf3bue/1/

总结我有以下问题，请记住我是一个初学者，我没有太多的 JS 经验:

1. 始终使用最新版本的 Masonry 和 ImagesLoaded 代码是一个明智的想法，还是我应该坚持使用提供的文件？
2. 如果 1. 是 => 我该如何修改代码，使图像不再相互堆叠？
3. 如果 1. 不是 => 我该如何修复代码，使屏幕截图 2 和 3 中的重叠图像和背景出血消失？

Answer 1

任何时候你处理砖石，而不是使用:

$(document).ready(function(){ ... go masonry ... }

使用:

$(window).load(function(){ ... go masonry ... }

http://jsfiddle.net/sdynfq83/2/

$(document).ready 在 DOM 完全加载后立即触发。这不包括加载图像等资源。 Masonry 根据图像的宽度和高度计算图像的绝对定位。如果它在加载实际图像之前运行，它会将图像标签视为宽度和高度为零的元素。为此，它只会偏移之间的装订线，图像最终会堆叠起来。

$(window).load 在所有页面资源完成加载后触发。这允许 Masonry 在尝试放置所有对象之前获得所有对象的正确尺寸。