Question

我正在尝试从Unify in Rails 4中重新创建砌体博客视图。 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小提琴：http://jsfiddle.net/sdynfq83/

我注意到以下事项：

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

当删除columnWidth代码并将其替换为固定数字（300）+向网格框添加宽度时，它似乎可以正常工作。这不是我想要的，因为图像尺寸不再正确。

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/

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

截图2 截图3

但我想更新到最新版本的砌体和图片，所以我可以继续使用bower轻松更新这些文件。 我也希望使用最新版本的一切修复屏幕截图2中的重叠图像。我在下面用旧代码编写了一个JS小提琴。

/**
 * 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.是否=＆gt;如何修复代码，以便屏幕截图2和3中的重叠图像和背景消失？

Answer 1

任何时候你正在处理砖石，而不是使用：

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

使用：

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

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

完全加载DOM后，

$（document）.ready触发器。这不包括加载像图像这样的资源。 Masonry根据图像的宽度和高度计算图像的绝对位置。如果它在加载实际图像之前运行，则会将图像标记视为零宽度和高度的元素。只有它之间的阴沟偏移和图像最终堆叠。

所有页面资源加载完成后，

$（window）.load触发器。这允许砌体在尝试放置它们之前获得所有对象的正确尺寸。

Answer 2

大卫·德桑德罗自己回答了我。

$(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'
    });
  });

});

在Masonry v3中，columnWidth不再接受函数。相反，使用   响应式布局的元素大小。

这是一个演示   http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/

这解决了这个问题。

动态columnWidth导致砌体中的堆叠图像

2 个答案: