jquery - 如何在同位素中获取最后一行并单击向上展开它们？

Question

设想

我正在使用带有角度 js 的同位素插件（ http://isotope.metafizzy.co/ ）。单击缩略图时，我将添加“扩展”类并增加其宽度和高度以占据四个框。

我们可以这样做吗？：

当我单击“最后一行”的缩略图图像时，它占据了四个缩略图，但向下增长以创建空白空间。根据附图。有没有办法向上扩展缩略图，这样在任何情况下都不会有任何空白空间

代码片段

 $grid = $('.grid');
    $grid.isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: 205
        },
        gutter: 0,
        onLayout: function ($elems, instance) {  
            $elems.show(); // initially elements were hidden and dislayed when all of them rendered
        }
    }

Answer 1

除非您在扩展时移除或隐藏其他元素，否则砌体将无法在之前的相同空间中容纳更大的元素。它也不会用另一个图像覆盖一个图像。

我不相信有一个简单的解决方案可以让它在其他图像上向上扩展，但如果你只需要停止它扩展 div 并创建空白空间，你可以尝试从图片集中隐藏两个随机元素（不包括所选的一个）在您的扩展功能中，并查看砌体是否正确地重新装配。