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

我正在使用同位素j查询插件（使用砌体布局）在我的画廊中显示图像... 我试图实现的是围绕元素的所有边的边框，但不是在图像之间.. 所以边界应该只是在外面，而不是在图像之间....围绕所有元素的同位素边界

我没有问题，边界将图像之间打破所以这不是一个问题:)

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

谢谢你们所有的时间。

这是我的代码使用

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

本身的伟大工程的同位素..

我试过的造型与psuedos（第一， nth等），但它不能很好地工作，因为图像的大小不同...。

I考虑扫描图像，并试图找出是否有一个项目毗邻它，并设置适当的风格。但我希望避免这一点，因为这项任务可以非常乏味......而我很懒; ）

来源

2016-06-19 Segev Moran

你可以提供一个图库标记的例子吗？ –

欢迎来到Stackoverflow :-)你到目前为止尝试过什么？ – JimHawkins

这不是一件容易的事。你必须聘请人来做到这一点... – makshh

我不认为现有的方法或简单的CSS解决方案，你想要完成。它看起来像同位素绝对定位每个元素，并保持其幕后的位置/坐标;将父容器匀场匀场，以实时计算高度。

您可能可以使用同位素的.getfiltereditemelements()并遍历结果Array，将宽度，高度和x/y坐标与父级的维度进行比较，以了解该元素是否为“边缘”元素 - 以及它是否可能是顶行或底行元素。

来源

2016-06-19 18:13:00

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

回答

相关问题