hongkhanh / gridify

A lightweight script for creating a Pinterest-like grid using JQuery, pure javascript or YUI with image loaded
http://hongkhanh.github.io/gridify
MIT License
124 stars 33 forks source link

The height of the grid container collapse. Look's like it's always this way. #5

Open lukaskoeller opened 9 years ago

lukaskoeller commented 9 years ago

In every case (also the given example in 'javascript/example') the height of the container collapse. Would be very nice if this could be fixed!

JustinWestphal commented 9 years ago

Nothing yet on this? I haven't been able to figure out a CSS workaround.

chakravarthysm commented 9 years ago

I'm facing the same problem.. most of the times the the height of container collapses, when we reload or try to inspect, the height becomes normal, could there be a solution for this issue?

SunDi3yansyah commented 9 years ago

I also experienced this

PPetky commented 4 years ago

Hi, All!

The work around is rewriting then "render" method

        render = function()
        {
            self.style.position = 'relative';
            var items = self.querySelectorAll(options.srcNode),
                transition = (options.transition || 'all 0.5s ease') + ', height 0, width 0',
                width = self.clientWidth,
                item_margin = parseInt(options.margin || 0),
                item_width = parseInt(options.max_width || options.width || 220),
                column_count = Math.max(Math.floor(width/(item_width + item_margin)),1),
                left = column_count == 1 ? item_margin/2 : (width % (item_width + item_margin)) / 2,
                columns = [];
            var parent_height = "0";
            if (options.max_width)
            {
                column_count = Math.ceil(width/(item_width + item_margin));
                item_width = (width - column_count * item_margin - item_margin)/column_count;
                left = item_margin/2;
            }
            for (var i = 0; i < column_count; i++)
            {
                columns.push(0);
            }
            for (var i= 0, length = items.length; i < length; i++)
            {
                var idx = indexOfSmallest(columns);
                items[i].setAttribute('style', 'width: ' + item_width + 'px; ' +
                    'position: absolute; ' +
                    'margin: ' + item_margin/2 + 'px; ' +
                    'top: ' + (columns[idx] + item_margin/2) +'px; ' +
                    'left: ' + ((item_width + item_margin) * idx + left) + 'px; ' +
                    'transition: ' + transition);

                columns[idx] += items[i].clientHeight + item_margin;

                var child_max = items[i].offsetTop + items[i].clientHeight;
                if(child_max>parent_height) {
                    parent_height = child_max;
                } 
            }
            parent_height += item_margin;
            self.style.height = parent_height + 'px';
        };

https://github.com/hongkhanh/gridify/issues/6#issue-64932823