同位素-同位素以外的元素

Question

我正在构建一个页面，其中有由Isotope控制的块，并且我想插入一个分隔符。下面是我的例子：

    <div id="container_iso">
    <div class="block col1"></div>
    <div class="block col2"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>

    <div class="separator"></div>

    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>

    <div class="separator"></div>

    </div>
<style>
.container_iso{max-width:999px;}
.block{}
.col1{width:33%;min-width: 333px;}
.col2{width:auto;min-width: 333px;max-width: 666px;}
.separator{width:100%;}
</style>

我如何告诉Isotope不要在我的“分隔符”div上工作。这是我的js：

$('.container_iso').isotope({
      itemSelector : '.block',
      columnWidth : 333,
    });

谢谢！

Answer 1

如果分隔符中没有任何内容，则可以

1)在你喜欢的高度的地方放置一个透明的png图像。2)您可以使用此示例代码来实现您的目标

.container_iso{max-width:999px; border: 1px solid #111; }
.block{}
.col1{float: left; width:33%;min-width: 333px;height: 25px; background-color: #eee; border: 1px solid #ddd;}
.col2{float: left; width:auto; min-width: 333px; max-width: 666px; height: 25px; background-color: #ccc; border: 1px solid #ddd;}
.separator{float:left; width:100%; height: 25px; background-color: #fff;}

同位素在默认情况下是指元素之间没有间隙。

如果你能弄清楚确切的情况，你可能会得到确切的答案。下面是我的jsFiddle示例：

http://fiddle.jshell.net/C7nUM/3/

http://fiddle.jshell.net/C7nUM/3/show/

希望这能行得通..

Answer 2

根据您的后续评论，您的问题是自动调整列大小。

默认布局为Masonry。Masonry通过为布局中的每个列宽度分配一列来计算位置。如果您不指定第一个元素，它将从第一个元素中获取大小。

但是，您可以在选项中指定列大小。重要说明：您实际上可以指定一个比所有项都小的列宽。最好找到一个值，它是所有项宽度的公共因子，如果可能的话，因为非常小的宽度会在幕后导致更多的内存使用。

例如：

$('.container_iso').isotope({
      itemSelector : '.block',
      layoutMode: 'masonry',
      masonry: {
          columnWidth: 5
      }
    });