如何获得最后一排，同位素和点击后展开他们向上的方向？

问题描述

场景

我usign同位素插件（）具有角JS。在缩略图我加入类点击扩展，并增加其宽度和高度占据四盒。

我们可以这样做：

当我点击最后一排它的占位4 tumbnails的缩略图，但向下生长到创建空的空间。按照附加的图像。有没有什么办法exapand缩略图向上的方向，以便在任何情况下都不会有任何空的空格

code段

  $电网= $（'网格'）;
    $ grid.isotope（{
        itemSelector：.grid项目'，
        石工： {
            columnWidth时：205
        }，
        天沟：0，
        onLayout：函数（$ elems，实例）{
            $ elems.show（）; //元素最初被隐藏，当所有的人都变得dislayed
        }
    }
 

解决方案

除非你删除或扩大时隐藏其他元素，那么砌筑将无法在它没有previously相同的空间，以适应更大的元素。它也将不包括用另一个图象。

我不相信有一个简单的解决方案，使其向上拓展在其他图像，但如果你只需要阻止它扩大div和创建空的空间，你可以尝试从图片中隐藏两个随机元素集合（不包括所选择的一种）在你的扩展功能，看看是否砖石重新夹具本身正确。

Scenario

I am usign isotope plugin (http://isotope.metafizzy.co/) with angular js. On click of thumbnail image I am adding class "expanded" and increasing its width and height to occupy four boxes.

Can we do this?:

When I click on thumbnail image of "last row" Its occuping four tumbnails but growing downwards to create empty space. as per attached image. Is there any way to exapand thumbnail in upward direction so that In any case there will not be any empty blank space

Code Snippet

 $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
        }
    }

解决方案

Unless you remove or hide other elements when expanding, then masonry will not be able to fit larger elements in the same space it did previously. It also will not cover one image with another.

I don't believe there is an easy solution to make it expand upwards over the other images, but if you just need to stop it expanding the div and creating the empty space, you could try hiding two random elements from the picture collection (excluding the selected one) in your expand function, and see if masonry re-jigs itself correctly.

这篇关于如何获得最后一排，同位素和点击后展开他们向上的方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！