6

Masonryアイテムを1000px幅のdivでラップし、jQueryを使用してdivを2000xにサイズ変更するボタンがありますaddClass()。問題は、Masonryがアイテムを再シャッフルして余分な1000pxスペースを埋めないことです。ブラウザウィンドウのサイズを変更すると、サイズ変更が機能することがわかります。再シャッフル。

組積造：

$(function(){
    $('#container').masonry({
        // options
        itemSelector : '.item',
        columnWidth : 240
    });
});

ボタン：

$("a.button").toggle(function(){
    $(this).addClass("flip");
    $("div#container").fadeOut("fast", function() {
        $(this).fadeIn("fast").addClass("resize");
    });

CSS：

width: 1000px; /* default */
width: 2000px !important; /* on button press */

（'a'）を実行してみました。同じボタンを使用して石積み関数をクリックすると、正常に機能しているように見えますが、問題は解決していません。

何かアドバイス？私は困惑しています：/

4

3 に答える 3

10

サイズ変更ボタンがクリックされたときに、石積み関数agianを実行する必要があると思います。

$("a.button").toggle(function(){
    $(this).addClass("flip");
    $("div#container").fadeOut("fast", function() {
    $(this).fadeIn("fast").addClass("resize");
    // run masonry again
    $('#container').masonry({      
      itemSelector : '.item',
      columnWidth : 240
    });
});
于 2011-07-01T02:33:55.167 に答える
8

http://masonry.desandro.com/methods.html#reloaditemsから、呼び出し.masonry('reloadItems')はブロックに一致する (おそらく新しい) アイテムを取得itemSelectorして再配置しますが、呼び出し.masonry()はそのアイテムの最新の寸法に基づいてアイテムを再配置するだけです。

于 2011-11-22T20:47:30.683 に答える
-2

jquery でサイズ変更イベントをトリガーしてみてください。

$(window).trigger('resize');

それは私のために働いた！

于 2012-08-29T18:03:38.347 に答える