How to get last row in Isotope and on click expand them upward direction ?

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/19513303/how-to-get-last-row-in-isotope-and-on-click-expand-them-upward-direction