带抽屉的同位素

Question

我被困住了，真的需要帮助！我有砖的布局，我使用jquery同位素布局。有三种砖尺寸：方形，双宽和双方形，因此它们完美地适合放置。我需要做的是点击它时在抽屉下面打开一个抽屉，然后将抽屉高度所需的任何砖块向下推。这是一个模型来解释我想要做的事情：

Bricks with Drawer http://bdub.ca/bricks_drawer.jpg

在这个例子中，点击了橙色砖，抽屉在下一个换行符处打开，这个换行符位于红砖之后。抽屉总是半宽，就像样机一样。

有什么想法吗？我很茫然，所以任何建议都会非常感激！

Answer 1

Jason Sperske提出的解决方案：

http://jsfiddle.net/thomasNDS/5fNe9/2/

此示例在点击时展开块的大小并重新布局其他块。

          $items.click(function(){ // $items regroup all item display
            var $this = $(this);
            // nothing to change if this already has large class
            if ( $this.hasClass('large') ) { 
              $this.removeClass('large');
            }else{
                var $previousLargeItem = $items.filter('.large');
                $previousLargeItem.removeClass('large');
                $this.addClass('large');
            }
             $container.isotope( 'reLayout' );
          });

您可以使用3种不同大小的块来调整此代码。