javascript - メーソンリーで画像が積み上げられる動的な columnWidth

Question

Rails 4 で Unify から石積みのブログビューを再作成しようとしています。

私はテーマを購入し、アプリケーション内に最新の 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 コードをコピーして同じ JS ファイルと CSS ファイルを含めると、同じ問題が発生するため、私の HTML コードは問題ないようです。
「.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 フィドルを以下に示します。

/**
 * 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 の重複する画像と背景のにじみがなくなるようにコードを修正するにはどうすればよいですか?

score 1 · Accepted Answer

以下を使用する代わりに、石積みを扱っているときはいつでも:

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

使用する：

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

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

$(document).ready は、DOM が完全に読み込まれるとすぐにトリガーされます。これには、画像などのリソースの読み込みは含まれません。Masonry は、幅と高さに基づいて画像の絶対位置を計算します。実際の画像が読み込まれる前に実行すると、画像タグは幅と高さがゼロの要素として認識されます。そのため、ガター間のオフセットのみがあり、画像が積み重なってしまいます。

$(window).load は、すべてのページリソースの読み込みが完了するとトリガーされます。これにより、Masonry はすべてのオブジェクトを配置する前に正しい寸法を取得できます。

score 1 · Accepted Answer

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

});

Masonry v3 では、columnWidth は関数を受け入れなくなりました。代わりに、レスポンシブレイアウトには要素のサイズ変更を使用してください。

ここにデモがあります http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/

これにより、問題が修正されます。

javascript - メーソンリーで画像が積み上げられる動的な columnWidth

2 に答える 2

Related

Reference