Question

我试图使用Isotope布局库来创建一些＆＃34;房屋的可视化＆＃34; （由方框表示）每个可以包含多个＆＃34;房间＆＃34; （由不同颜色的盒子代表）。每个房间都包含一个人名列表 - 有些房间名称很少，有些房间有更多。

在HTML中，它看起来像这样：

<div class="houses">
  <div class="house">
    House A
    <div class="room">Room A<ul><li>Name 1</li><li>Name 2</li></ul></div> 
    <div class="room">Room B ...</div>
    <div class="room">...</div>
  </div>
  <div class="house">
    House B
    ...
  </div>
  ...
</div>

然后我尝试两次使用Isotope来获得这种嵌套效果：

$(document).ready(function() {
  $('.house').isotope({
    itemSelector: '.room',
    layoutMode: 'masonry',
  });

  $('.houses').isotope({
    itemSelector: '.house',
    layoutMode: 'masonry',
  });
});

CSS看起来像这样：

  .room { border: 1px solid black; padding: 4px; margin: 5px; background-color: blue }
  .house { padding: 5px; margin: 5px; background-color: red; }
  .houses { padding: 5px; margin: 5px; }

然而它不起作用 - ＆＃34;房屋＆＃34;崩溃并在左上角显示为小方块。＆＃34;房间＆＃34;显示为非常窄的框，看似随机布置在页面上，大多数在页面顶部相互重叠（重叠）。

如果我为.house添加固定宽度，例如＆＃34;宽度：30％＆＃34; - 每件事看起来都很棒。然后，我得到3列＆＃34;房屋＆＃34;，＆＃34;房间＆＃34;整齐布局。

然而，这并不是我所寻找的，因为有时30％的页面太大了，有时它太少了。特别是当页面应该响应时，这是一个非常大的问题。

如何获得＆＃34;外部＆＃34;同位素实例要尊重＆＃34;内部＆＃34;计算的宽度。同位素实例？

我错过了一种更简单的方法吗？ - 或者我需要查看不同的布局库吗？

我创建了一个显示问题的jsfiddle：

http://jsfiddle.net/Gt8qn/

当您取消评论＆＃34;宽度：30％;＆＃34; - 框子布局正确，作为嵌套框。

嵌套的同位素布局可能吗？

0 个答案: