过滤Pinterest风格的网格

Question

我在要过滤的列中创建了Pinterest风格的图像网格。图像有两种不同的高度，但宽度都是一样的。

问题是当小图像加载后的图像时，它会漂浮在小图像的正下方，在它之后产生一个难看的间隙。

例如，当您在此处点击“类别3”时：http://www.designlunatic.com/demos/isotope/ 最后一个元素被卡在最小元素之下，当我希望它一直向左移动时。

我尝试过使用同位素，shuffle.js，mixitup等。这些似乎都是基于不同高度和宽度的网格，并创造了差距。

Answer 1

尝试将布局模式更改为masonryHorizo​​ntal以查看是否有帮助。 IE：

$container.isotope({
    filter: '*',
    layoutMode: 'masonryHorizontal'
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    }
});

过去我曾经处理过类似的事情，我讨厌这样说，但你可能需要下载未经分析的同位素js并自定义定位以达到你想要的效果。

以下是有关布局模式的文档，在您对网站有特定需求时可能会有所帮助。通常默认的“砌体”是最好的方法，但是当你遇到这样的问题时，尝试一些替代方案会很有帮助：

http://isotope.metafizzy.co/layout-modes.html

我还有另外一个黑客。 Isotope使用绝对定位，基于它如何理解尺寸，形状和区域。你可以做什么来欺骗同位素是添加空div（基本上具有可见性的项目：隐藏在样式中）。它可以消耗一个空白区域并导致某些东西进入不同的位置。但是，社交媒体Feed等动态内容可能会使这种解决方案变得不切实际。