html - 同位素侧边界

Question

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

非常感谢。

Answer 1

当我第一次开始使用 Isotope 和 Masonry 布局时，我为此苦苦挣扎，所以我非常同情你!

事实证明，在 Isotope/Masonry 布局中，网格项之间的垂直间距称为 gutter，您根本不需要使用左边距/右边距。

这是一个例子:

假设您有一个包含九个元素的网格，您希望它为三列，每个元素之间有 2% 的间距。一个很好的方法是在我们的 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>

然后我们要做的是在我们的 CSS 中定位前两个“sizer”元素，并设置一些宽度。最终，当我们初始化 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 充当了 gutters 应该有多宽的模板。

计算这些数字的一些数学:

在 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'
    }

});