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不要使用我的“separator”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。砌体通过为布局中的每个列宽分配一列来计算位置。 如果您未指定，则从第一个元素获取大小。

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

e.g。

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

同位素 - 同位素外的元素

2 个答案:

e.g。