Question

我正在使用Isotope j Query插件（使用砌体布局）在我的画廊中显示图像... 我想要实现的是围绕元素的所有边缘的边界，但不是在图像之间。所以边界应该只在外面，而不是在图像之间......

我没有问题，边框会在图像之间中断，所以这不是问题：）

我还需要考虑用户可以过滤图像，这样边框应该动态地适应元素的数量以及它们在屏幕上的布局方式。

谢谢大家的时间。

这是我使用的代码

<div class="project">
    <div class="projects">
        <img src="path/to/image.jpg />
    </div>
    <div class="projects">
        <img src="path/to/image.jpg />
    </div>
    <div class="projects">
        <img src="path/to/image.jpg />
    </div>
</div>

我运行同位素插件：

$('.projects').isotope({
    itemSelector: '.project',
    originLeft: false,
    layoutMode: 'packery',
    packery: {
        gutter: 20
    }
});

同位素本身效果很好..

我尝试使用伪装（第一次，第n次等），但由于图像的大小不同而无法正常工作....

我想过扫描图像并试图弄清楚是否有一个物品接近它并设置合适的风格。但我希望避免这种情况，因为这项任务可能非常乏味......我很懒;）

Answer 1

我认为现有的方法或简单的CSS解决方案并不是您想要实现的目标。它看起来像Isotope绝对定位每个元素并保持其在幕后的位置/坐标;将父容器填充到运行中的计算高度。

您可以使用同位素的.getfiltereditemelements()并循环生成Array，将宽度，高度和x / y坐标与父级的尺寸进行比较，以了解是否该元素是一个“边缘”元素 - 以及它是否可能是顶行或底行元素。

所有元素周围的同位素边界

1 个答案: