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

Question

我正在尝试从 Rails 4 中的 Unify 重新创建砌体博客视图。 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/

我注意到以下几点：

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

主题本身提供了旧版本的砌体。其中的代码似乎可以工作。图像确实保持重叠（这可以通过调整大小或刷新 window 来修复）。

截图2 屏幕截图 3

不过，我想更新到最新版本的砌体和加载图像，这样我就可以继续使用 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 经验：

总是使用最新版本的 Masonry 和 ImagesLoaded 代码是个明智的主意还是我应该坚持使用提供的文件？
如果 1. 是 => 我该如何修改代码以使图像不再相互堆叠？
如果 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 在尝试放置所有对象之前获得所有对象的正确尺寸。

Answer 2

David Desandro 亲自回答了我。

$(document).ready( function() {
  // init Masonry after all images have loaded
  var $grid = $('.grid').imagesLoaded( function() {
    $grid.masonry({
      itemSelector: '.grid-item',
      percentPosition: true,
      gutter: 20,
      columnWidth: '.grid-sizer'
    });
  });

});

In Masonry v3, columnWidth no longer accepts a function. Instead, use element sizing for responsive layouts.

Here's a demo http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/

这解决了问题。

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

Dynamic columnWidth causing stacked images in Masonry

javascript

jquery

jquery-masonry

masonry

unify