Jquery callbacks with masonry pluggin

Question

I have a basic toggle switch that shows clicking on a div when closing all other similar divs. This works fine, switching is not a problem. See below:

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

I also used the Masonry pluggin for jQuery, which arranges all the selected div elements both horizontally and vertically. Brilliant, which also works for all kinds of different heights. See below:

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

I want it to reorganize the layout every time a div expands or collapses. Actually running the .masonry command as a callback for the initial .click function. This is what does not work for me. Applications for beginners.

See how it works now: kalpaitch.com

Andrew

Gaby - , , , .

Cyro - , . , , - , show/hide/toggleling WITH WITH (, ). divs ( kalpaitch.com). , , , .

Answer 1

, :

$(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: , , , . :

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

, . , , ().

: http://jasondaydesign.com/masonry_demo/

Answer 3

, masonry.js..

js/jquery.masonry.js, js/jquery.masonry.js (capital JS)

(,) , .

, , , ...

Answer 4

- , , - , , .reload. :

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