0

我正在构建一个页面，其中有由同位素统治的块，我想插入一个分隔符。这是我的例子：

    <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,
    });

谢谢 ！

4

2 回答 2

0

如果分隔符里面什么都没有，你可以

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 确切的场景，您可能会得到确切的答案。这里以我的 jsFiddle 为例：

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

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

希望有效..

于 2013-04-29T17:11:32.377 回答
0

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

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

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

例如

$('.container_iso').isotope({
      itemSelector : '.block',
      layoutMode: 'masonry',
      masonry: {
          columnWidth: 5
      }
    });
于 2013-05-16T11:41:55.663 回答