Połączenia zwrotne z masonem pluggin

Question

Mam podstawowy przełącznik, który pokazuje kliknięty div podczas zamykania wszystkich innych podobnych elementów div. Działa to dobrze, przełączanie nie jest problemem. Patrz poniżej:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle('slow'); 
    $(this).toggle('slow'); 
    $('.littleme').not(this).next().hide('slow'); 
    $('.littleme').not(this).show('slow'); 
    return false; 
}).next().hide(); 
}); 

Ja też skorzystał z masonerią pluggin dla jQuery, który organizuje wszystkie wybrane elementy div horrizontally a następnie w pionie. Genialny, który działa również na wszystkie rodzaje różnych wysokościach div. Zobacz poniżej:

$(function(){ 
    $('#mainContent').masonry({ 
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible', 
}); 
}); 

To, co chcę zrobić, to zreorganizować układ za każdym razem, gdy div rozwinie się lub zwinie. W efekcie wywołanie polecenia .masonry jako wywołania zwrotnego dla początkowej funkcji .click. To nie działa dla mnie. Appologies na pytanie dla początkujących.

Zobacz jak obecnie pracuje tu jego: kalpaitch.com

Andrew

Gaby - Dzięki za sprawdzanie składni, jestem dość dobry w fluffing ci się i następnie wydając około pół godziny działa okrągły patrząc dla nich.

Cyro - To jest idealne i działa, będę używać tego w niedalekiej przyszłości. To, co chciałem dodać, to jak można to osiągnąć w przypadku pokazywania/ukrywania/przełączania tych elementów z prędkością animacji (powyższy kod został odpowiednio zmieniony). Następnie wywołanie muru powinno wystrzelić zanim div zostaną rozszerzone (tak jak obecnie dzieje się na kalpaitch.com). Wielkie dzięki za odpowiedź, ale zdecydowanie łatwiej w ten sposób.

Answer 1

Spróbuj ponownie uruchomione połączenie konstrukcji murowanej re dostosować stronę po determinacji zmian kliknij:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle(); 
    $(this).toggle(); 
    $('.littleme').not(this).next().hide(); 
    $('.littleme').not(this).show(); 

    // re-run masonry 
    $('#mainContent').masonry({ 
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible' 
    }); 

    return false; 
}).next().hide(); 
}); 

EDIT: Patrząc na docs murarskie Wydaje się, że murarskie będzie zapisać ustawienia początkowe, więc po prostu trzeba ponownie wywołać główne metody. To powinno również zadziałać:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle(); 
    $(this).toggle(); 
    $('.littleme').not(this).next().hide(); 
    $('.littleme').not(this).show(); 

    // re-run masonry 
    $('#mainContent').masonry(); 

    return false; 
}).next().hide(); 
}); 

Answer 2

Masz złą ścieżkę, gdzie dołączyć plik masonry.js ..

użyć js/jquery.masonry.js gdy powinna być JS/jquery.masonry.js (kapitał JS)

i masz dodatkowy przecinek (,) u koniec opcji można przejść do murowane ..

Po naprawić te błędy w przykładzie, wystarczy uruchomić ponownie kod murowane jak Cryo wspomniało w swojej odpowiedzi ...

Answer 3

Miałem również przełącznik i nie mogłem zmontować muru, aby przeładować ten efekt. Ale dostałam masonry do przeładowania, gdy przedmioty były wyblakłe (przefiltrowane).

Patrz: http://jasondaydesign.com/masonry_demo/

Answer 4

Minęło trochę czasu, ale od kiedy naciskamy na swoje pytanie w poszukiwaniu czegoś innego, Chciałbym dodać, że murarski dodano funkcję .reload. To działa dla mnie:

 $(window).resize(function(){ 
      var wallWidth = $wall.width(); 
      var width  = $(window).width(); 
      if (width<700) { 
        $('.brick').css('width', wallWidth/1); 
        $wall.masonry('option', { columnWidth: wallWidth/1 }); 
        $wall.masonry('reload'); 
      } else if (width>=700 && width<1024) { 
        $('.brick').css('width', wallWidth/2 - 1); 
        $wall.masonry('option', { columnWidth: wallWidth/2 }); 
        $wall.masonry('reload'); 
      } else if (width>=1024) { 
        $('.brick').css('width', wallWidth/3 - 1); 
        $wall.masonry('option', { columnWidth: wallWidth/3 }); 
        $wall.masonry('reload'); 
      } 
     });