Best way to deal with height using angular-deckGrid

So I am using the angular-deckgrid plugin which creates a responsive pinterest like grid.

Really cool the plug in between.

I only have one little problem that only appears when I have a lot of items in my grid. At some point, a hole starts in the columns, simply because all the columns are the same height. And this is because the images are not the same height.

The point is that angular-deckgrid places the elements in the grid in a strict logical order and takes into account the height of the images.

Here's the piece of code where the copies are made:

    Deckgrid.prototype.$$createColumns = function $$createColumns () {
        var self = this;

        if (!this.$$scope.layout) {
            return $log.error('angular-deckgrid: No CSS configuration found (see ' +
                               'https://github.com/akoenig/angular-deckgrid#the-grid-configuration)');
        }

        this.$$scope.columns = [];

        angular.forEach(this.$$scope.model, function onIteration (card, index) {
            var column = (index % self.$$scope.layout.columns) | 0;

            if (!self.$$scope.columns[column]) {
                self.$$scope.columns[column] = [];
            }

            card.$index = index;
            self.$$scope.columns[column].push(card);
        });
    };

      

        
        
        
      

    

My question is now basically what should I do? I have 3 options.

• Find another plugin
• Looking for a plug that deals with this problem
• Rewrite this method yourself

I would not want to do the third one if the solution already exists, but if I need to do it.

But in this case, how to determine the height of the images without knowing it?

Thank you very much in advance