Question

我使用带有同位素过滤器库的插件，我将宽度设置为33.33％，因此我的列表元素被分成3列。我想选择中间一个来设置侧边框，但是当我点击过滤器时，元素将向左移动。这意味着我的原始CSS :nth-child(3n+2)将不再正确。关于如何总是选择中间项目的任何建议，因为HTML保持不变？

非常感谢。

Answer 1

当我第一次开始使用Isotope和Masonry布局时，我对此很挣扎，所以我绝对同情你！

事实证明，在同位素/砌体布局中，网格项之间的垂直间距称为装订线，您根本不需要使用左/右边距。

以下是一个例子：

我们假设您有一个包含九个项目的网格，并且您希望它是三列，每个项目之间的间隔为2％。一个很好的方法是设置一些＆＃34;参考元素＆＃34;在我们的HTML中，它将作为我们的网格项目大小和我们的装订线大小的模板。和我在一起。 HTML如下：

<div id="grid">

    <div class="item-sizer"></div>
    <div class="gutter-sizer"></div>

    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>

</div>

我们将做的是针对前两个＆＃34; sizer＆＃34;我们的CSS中的元素，并设置一些宽度。最终，当我们初始化Isotope时，Javascript会读取此内容。这是CSS：

.item-sizer {
    width: 32%;
}

.gutter-sizer {
    width: 2%;
}

/* note that this is the same as the .item-sizer */
.grid-item {
    width: 32%;
}

.item-sizer充当我们布局中列应该有多宽的模板。 .gutter-sizer充当了排水沟应该有多宽的模板。

一些数学计算出这些数字：

在3列布局中，您将有两个垂直间隙。这些差距中的每一个都是2％（因为我们决定我们希望我们的间隙有多宽），因此2％* 2间隙= 4％的间隙占用的总空间。如果你采用网格的整个宽度（100％），并减去我们的总间隙空间（4％），你将留下96％以均匀分配到你的网格项目。 96％/ 3列各占32％！

然后你必须调整你的Isotope调用来引用那些CSS选择器来相应地调整网格和排水沟的大小：

$('#grid').isotope({

    // set itemSelector so .item-sizer and .gutter-sizer are not mistaken for grid items:
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
        // tell the layout to use the items we set up as sizing templates:
        columnWidth: '.item-sizer',
        gutter: '.gutter-sizer'
    }

});

同位素边界

1 个答案: