1

我正在尝试从 Rails 4 中的 Unify 重新创建砌体博客视图。 http://htmlstream.com/preview/unify-v1.8/blog_masonry_3col.html

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

  • 砌体包装 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) + 向 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小提琴：http: //jsfiddle.net/8c0r06a6/2/

主题本身提供了旧版本的砖石。代码似乎在其中工作。图像确实保持重叠（这可以通过调整窗口大小或刷新窗口来解决）。

截图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 经验：

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

2 回答 2

1

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

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

利用：

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

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

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

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

于 2015-11-09T22:51:33.727 回答
1

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

$(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/

这解决了这个问题。

于 2015-11-11T11:30:23.173 回答