与抽屉同位素

我卡住了，真的需要帮助！我有一个砖布局，我正在使用jquery同位素进行布局。有三种砖尺寸：正方形，双宽和双正方形，所以它们完美地适合于地方。我需要做的是当你点击一个砖块时，在砖块下方打开一个抽屉，然后将所有砖块向下推到最低处，以便抽屉的高度。这里有一个实体模型来解释什么，我试图做的：与抽屉同位素

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

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

任何想法？我很茫然，所以任何建议都将非常感谢！

来源

2013-02-25 briteweb

你能把你到目前为止的小提琴放在一起吗？看看会更容易一些。 – dev 2013-02-25 20:54:54

橙色和红色砖以任何方式相关？如果没有，那么我不知道你对下面的内容有任何控制。您可以插入，但仅限左侧或右侧。同位素将确定它需要包装 – 2013-02-25 20:58:44

我唯一的想法是扩大橙色砖的高度和宽度，并调用'relowout' - http://isotope.metafizzy.co/docs/methods.html#relayout – 2013-02-25 21:04:16

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

来源

2013-09-17 14:31:00 Thomas

与抽屉同位素

回答

相关问题