ウィンドウがリサイズされるとjQueryの石積みのレイアウトが壊れています - 液体のシームレスなフォトグリッド

Question

私はvideoを投稿しました。 遅いフレームレートに申し訳ありません。

私はウィンドウをあまりに速く縮小すると、Masonry jQueryプラグインが遅すぎるためにブラウザが遅すぎると思われ、ブラウザのサイズ変更が速すぎるとレイアウトが損なわれます。アイテムのいくつかはフッターの下にあり、明らかに間違っているように見えます。

ビデオに見られるようにページをリロードすると、レイアウトは通常の状態に戻ります。私はそれが問題だと思う

はここsmartresize

あるデモページです： http://test.davewhitley.com/not-wp/isotope_test/index.php

このページが正常にそれをしない： http://tympanus.net/codrops/collective/collective-2/

のjavascript：

jQuery(document).ready(function($) { 
var CollManag = (function() { 
    var $ctCollContainer = $('#ct-coll-container'), 
    collCnt = 1, 
    init = function() { 
     changeColCnt(); 
     initEvents(); 
     initPlugins(); 
    }, 
    changeColCnt = function() { 
     var w_w = $(window).width(); 
     if(w_w <= 600) n = 2; 
     else if(w_w <= 768) n = 3; 
     else n = 4; 
    }, 
    initEvents = function() { 
     $(window).on('smartresize.CollManag', function(event) { 
      changeColCnt(); 
     }); 
    }, 
    initPlugins = function() { 
     $ctCollContainer.imagesLoaded(function(){ 
      $ctCollContainer.masonry({ 
       itemSelector : '.ct-coll-item', 
       columnWidth : function(containerWidth) { 
        return containerWidth/n; 
       }, 
       isAnimated : true, 
       animationOptions: { 
        duration: 300 
       } 
      }); 
     }); 
     $ctCollContainer.colladjust(); 
     $ctCollContainer.find('div.ct-coll-item-multi').collslider(); 
    }; 
    return { init: init }; 
})(); 
CollManag.init(); 
}); 

Answer 1

途中で素晴らしい仕事。

ある点では、レイアウトが少し狂っています。確かにこれは、ブラウザーがパーセンテージの幅+石積みを処理する方法にまさしくあります。大きなヒント：

コンテナは小さくしますが、画像は大きくしてください。

.mycontainer {width：24％; ） .mycontainer img {width：101％;高さ：自動; ）

http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/

Answer 2

私は同じ問題がありました。私はbindResizeをWindowsのサイズ変更に使用しました。私は

彼らのウェブサイト上で、この解決策を見つけ

Masonry Methods

bindResizemasonry.pkgd

$container.masonry({ 
    itemSelector: '.container' 
}); 

$(window).resize(function() { 
    $container.masonry('bindResize') 
});