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

Calculate parent height #6

Open shahroq opened 9 years ago

shahroq commented 9 years ago

Hi, I hade a problem with the items container height. As long as items use absolute positing, so the container does not extend while items render. so i come with these lines of code to calculate height on window resizing:

var child_max = $item.position().top+$item.outerHeight();
if(child_max>parent_height) parent_height=child_max;

that should placed inside 'rebder' function. It's complete changes tha i've made to this method:

                render = function()
                {
                    $this.css('position', 'relative');
                    var items = $this.find(options.srcNode),
                        transition = (options.transition || 'all 0.5s ease') + ', height 0, width 0',
                        width = $this.innerWidth(),
                        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 $item = $(items[i]), idx = indexOfSmallest(columns);
                        $item.css({
                            width: item_width,
                            position: 'absolute',
                            margin: item_margin/2,
                            top: columns[idx] + item_margin/2,
                            left: (item_width + item_margin) * idx + left,
                            transition: transition
                        });
                        columns[idx] += $item.innerHeight() + item_margin;

                        var child_max = $item.position().top+$item.outerHeight();
                        if(child_max>parent_height) parent_height=child_max;
                    }
                    parent_height += item_margin;
                    $this.css({height: parent_height+'px'});
                };
a-bakos commented 7 years ago

The above solution does solve the problem, thanks @shahroq