jquery - 带抽屉的同位素

Question

我被困住了，真的需要帮助！我有一个使用 jquery isotope 进行布局的砖块布局。砖块共有三种尺寸：方形、双宽和双方形，因此它们非常适合放置。我需要做的是，当您单击砖块时，在砖块下方打开一个抽屉，然后将下方的砖块向下推至抽屉高度所需的高度。这是一个模型来解释我正在尝试做的事情：

带抽屉的砖 http://bdub.ca/bricks_drawer.jpg

在这个例子中，橙色砖被点击，抽屉在下一个换行符处打开，在红砖之后。抽屉将始终是模型中的半宽。

有任何想法吗？我很茫然，所以任何建议都将不胜感激！

Answer 1

Jason Sperske 建议的解决方案：

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

此示例在单击时扩展 a 块的大小并重新布局其他块。

          $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 种不同大小的块将此代码调整为您的示例。