devoluciones de llamada de Jquery con pluggin de mampostería

Question

Tengo un interruptor de palanca básico que muestra el clic en div mientras se cierran todos los demás divs similares. Esto funciona bien, el alternar no es el problema. Vea a continuación:

$(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(); 
}); 

También he hecho uso de la mampostería pluggin para jQuery, que organiza todos los elementos div seleccionados horrizontally y luego verticalmente. Brillante que funciona igual para todo tipo de alturas div diferentes. Ver más abajo:

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

Lo que yo quiero que haga es reorganizar la disposición cada vez que un div se amplía o reduce. En efecto, activa el comando .masonry como una devolución de llamada para la función .click inicial. Esto es lo que no funciona para mí. Aplicaciones para la pregunta de principiantes.

Vea cómo su trabajo actualmente aquí: kalpaitch.com

Andrew

Gaby - Gracias por la comprobación de sintaxis, yo soy bastante bueno en los esponjar y luego pasar una media hora corriendo por mirar para ellos.

Cyro - Eso es perfecto y funciona, voy a utilizar esto en el futuro cercano. Lo que tenía la intención de agregar era cómo se lograría esto en el caso de mostrar/ocultar/alternar estos CON una velocidad de animación (el código anterior se modificó en consecuencia). Luego, la llamada de albañilería se activaría antes de que los divs se expandan (como está sucediendo actualmente en kalpaitch.com). Muchas gracias por la respuesta, definitivamente es más fácil de esta manera.

Answer 1

intente volver a ejecutar la llamada a la albañilería re ajustar la página después de la determinación clic cambia:

$(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: En cuanto a los documentos de albañilería, parece que la Masonería guardará sus ajustes iniciales por lo que sólo tiene que llamar al método principal de nuevo. Esto debería funcionar también:

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

que haya un camino equivocado, donde se incluye el archivo de masonry.js ..

utilizar js/jquery.masonry.js cuando debería ser JS/jquery.masonry.js (capital JS)

y tiene una coma adicional (,) en el final de las opciones de pasar a la albañilería ..

Después de corregir los errores en su ejemplo, basta con ejecutar el código de mampostería de nuevo como Cryo mencionó en su respuesta ...

Answer 3

También tenía un conmutador, y no podía cargar la mampostería para ese efecto. Pero conseguí albañilería para volver a cargar cuando los elementos se desvanecieron (filtrados).

Ver: http://jasondaydesign.com/masonry_demo/

Answer 4

Ha sido un tiempo, pero ya que dejan de golpear en su pregunta durante la búsqueda de algo más, me gustaría añadir aquí que la Masonería ha añadido una función .Reload. Esto funciona para mí:

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