Javascript 过滤器Pinterest样式网格

我已经创建了一个Pinterest样式的图像网格，在我想要过滤的列中。图像有两种不同的高度，但宽度都相同

问题是，当小图像后面的图像加载时，它会浮在小图像的正下方，在小图像后面形成一个难看的间隙

例如，当您单击此处的“类别3”时： 最后一个元素卡在最小的元素下面，我希望它一直向左移动

---

我尝试过使用同位素、shuffle.js、mixitup等等。这些都是基于不同高度和宽度的网格，并创建了间隙

尝试将布局模式更改为masonryHorizontal，看看是否有帮助。即：

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

我以前也处理过类似的事情，我不想这么说，但是你可能需要下载未统一的同位素js并定制定位以达到你想要的效果

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

我还有一个黑客给你。同位素利用绝对定位的基础上，它了解的大小和形状和面积的工作。您可以做的是添加空div（基本上是具有可见性的项：隐藏在样式中）。它可以消耗一个空白区域，并导致某些东西进入不同的位置。不过，社交媒体提要等动态内容可能会使此解决方案不切实际